1
votes

JQuery Pour cocher toutes les cases dans td en fonction du nom de classe de tr en horizontal

voici mon exemple de code. Attaché une image. le format qui m'est requis

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
    <tbody>
        <tr>
            <th>
                1. <input type="checkbox" class="groupHeadCheck" />
            </th>
            <td>
                <input type="checkbox" id="1" />
            </td>
            <td>
                <input type="checkbox" id="2" />
            </td>
            <td>
                <input type="checkbox" id="3" />
            </td>
        </tr>
        <tr>
            <th>
                2. <input type="checkbox" class="groupHeadCheck" />
            </th>
            <td>
                <input type="checkbox" id="4" />
            </td>
        </tr>
        <tr>
            <th>
               3.  <input type="checkbox" class="groupHeadCheck" />
            </th>
            <td>
                <input type="checkbox" id="6" checked="checked" />
            </td>
            <td>
                <input type="checkbox" id="7" checked="checked"/>
            </td>
        </tr>        
    </tbody>
</table>

.groupHead td { background-color: #CCC; }

$("table tbody").on("change", "input[type=checkbox]", function (e) { 
    var currentCB = $(this);
    var isChecked = this.checked;
    if (currentCB.is(".groupHeadCheck")) {
        var allCbs = currentCB.closest('tr').nextUntil('tr.groupHead').find('[type="checkbox"]').prop('checked', isChecked);
    } else {
        var allCbs = currentCB.closest('tr').prevAll("tr.groupHead:first").nextUntil('tr.groupHead').andSelf().find('[type="checkbox"]');
        var allSlaves = allCbs.not(".groupHeadCheck");
        var master = allCbs.filter(".groupHeadCheck");
        var allChecked;
        if (!isChecked) {
            allChecked = false;
        } else {
            allChecked = allSlaves.filter(":checked").length === allSlaves.length;
        }
        master.prop("checked", allChecked);
    }
});

$(".groupHead").next().find("[type=checkbox]").change();

Ici, le code de Fiddle fonctionne bien pour le vertical.

Lorsque la case à cocher dans la première ligne avec la classe groupHeadCheck, toutes les cases à cocher des id 1, 2 et 3 seront également cochées.
Et si toutes les cases à cocher 1, 2 et 3 sont déjà cochées, la case de la première ligne sera cochée.
Je veux que cela fonctionne dans un modèle horizontal plutôt que vertical

S'il vous plaît, toute aide!

javascript jquery html

2 commentaires

ton 1 et 2 me semblent bien me convenir, si tu veux tes cases à cocher horizontales tu peux ajouter du float: de gauche à très

@ChrisLi si vous voyez quand je vérifie 1. tr 2 et 3 tr est en cours de vérification.

5 Réponses :

1
votes

Simplifiez simplement quelques chaînes de code

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
    <tbody>
        <tr>
            <th>
                1. <input type="checkbox" class="groupHeadCheck" />
            </th>
            <td>
                <input type="checkbox" id="1" />
            </td>
            <td>
                <input type="checkbox" id="2" />
            </td>
            <td>
                <input type="checkbox" id="3" />
            </td>
        </tr>
        <tr>
            <th>
                2. <input type="checkbox" class="groupHeadCheck" />
            </th>
            <td>
                <input type="checkbox" id="4" />
            </td>
        </tr>
        <tr>
            <th>
               3.  <input type="checkbox" class="groupHeadCheck" />
            </th>
            <td>
                <input type="checkbox" id="6" checked="checked" />
            </td>
            <td>
                <input type="checkbox" id="7" checked="checked"/>
            </td>
        </tr>        
    </tbody>
</table>

.groupHead td { background-color: #CCC; }

$("table tbody").on("change", "input[type=checkbox]", function (e) { 
    var currentCB = $(this);
    var isChecked = this.checked;
    
    if (currentCB.is(".groupHeadCheck")) {
        var allCbs = currentCB.closest('tr').find('[type="checkbox"]').prop('checked', isChecked);
    } else {
        var allCbs = currentCB.closest('tr').find('[type="checkbox"]');
        var allSlaves = allCbs.not(".groupHeadCheck");
        var master = allCbs.filter(".groupHeadCheck");
        var allChecked;
        if (!isChecked) {
            allChecked = false;
        } else {
            allChecked = allSlaves.filter(":checked").length === allSlaves.length;
        }
        master.prop("checked", allChecked);
    }
});

$(".groupHead").next().find("[type=checkbox]").change();

0 commentaires

1
votes

Vérifiez ceci

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
    <tbody>
        <tr>
            <th>
                1. <input type="checkbox" class="groupHeadCheck" />
            </th>
            <td>
                <input type="checkbox" id="1" />
            </td>
            <td>
                <input type="checkbox" id="2" />
            </td>
            <td>
                <input type="checkbox" id="3" />
            </td>
        </tr>
        <tr>
            <th>
                2. <input type="checkbox" class="groupHeadCheck" />
            </th>
            <td>
                <input type="checkbox" id="4" />
            </td>
        </tr>
        <tr>
            <th>
               3.  <input type="checkbox" class="groupHeadCheck" />
            </th>
            <td>
                <input type="checkbox" id="6" checked="checked" />
            </td>
            <td>
                <input type="checkbox" id="7" checked="checked"/>
            </td>
        </tr>        
    </tbody>
</table>

.groupHead td { background-color: #CCC; }

$("table tbody").on("change", ".groupHeadCheck", function (e) { 
    var currentCB = $(this);
    var pt =  $(this).parents("tr");
    var isChecked = this.checked;
    pt.find("input[type=checkbox]").prop("checked", isChecked);
   
});

$(".groupHead").next().find("[type=checkbox]").change();

Légèrement modifié votre code J'espère que vous recherchez cette logique .. veuillez commenter si cela fonctionne

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
    <tbody>
        <tr>
            <th>
                1. <input type="checkbox" class="groupHeadCheck" />
            </th>
            <td>
                <input type="checkbox" id="1" />
            </td>
            <td>
                <input type="checkbox" id="2" />
            </td>
            <td>
                <input type="checkbox" id="3" />
            </td>
        </tr>
        <tr>
            <th>
                2. <input type="checkbox" class="groupHeadCheck" />
            </th>
            <td>
                <input type="checkbox" id="4" />
            </td>
        </tr>
        <tr>
            <th>
               3.  <input type="checkbox" class="groupHeadCheck" />
            </th>
            <td>
                <input type="checkbox" id="6" checked="checked" />
            </td>
            <td>
                <input type="checkbox" id="7" checked="checked"/>
            </td>
        </tr>        
    </tbody>
</table>

.groupHead td { background-color: #CCC; }

$("table tbody").on("change", "input[type=checkbox]", function (e) { 
    var currentCB = $(this);
    var pt =  $(this).parents("tr");
    var isChecked = this.checked;
    pt.find("input[type=checkbox]").prop("checked", isChecked);
   
});

$(".groupHead").next().find("[type=checkbox]").change();

2 commentaires

cela fonctionne bien, mais il faut encore des modifications si nous sélectionnons chaque case individuellement et toutes sélectionnées, puis cochez toutes les cases à cocher doivent également être cochées. vous pouvez @ Александр Чертков est fait selon les besoins. en tout cas merci pour l'aide.

@PullataPraveen vous voulez dire que si nous cochons une case dans la rangée, vous devez cocher d'accord?

1
votes

J'ai fait ce que vous voulez.

Il cochera également automatiquement la case au chargement de la page si toutes les autres cases sont cochées, puis il cochera la première case.

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <meta charset="UTF-8">
</head>
<body>

    <table>
        <tbody>
            <tr>
                <th>
                    1. <input type="checkbox" class="groupHeadCheck" />
                </th>
                <td>
                    <input type="checkbox" id="1" />
                </td>
                <td>
                    <input type="checkbox" id="2" />
                </td>
                <td>
                    <input type="checkbox" id="3" />
                </td>
            </tr>
            <tr>
                <th>
                    2. <input type="checkbox" class="groupHeadCheck" />
                </th>
                <td>
                    <input type="checkbox" id="4" />
                </td>
            </tr>
            <tr>
                <th>
                   3.  <input type="checkbox" class="groupHeadCheck" />
                </th>
                <td>
                    <input type="checkbox" id="6" checked="checked" />
                </td>
                <td>
                    <input type="checkbox" id="7" checked="checked"/>
                </td>
            </tr>        
        </tbody>
    </table>



    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
    $(document).on("change", "input[type=checkbox]", function (e) { 
        var currentCB = $(this);
        var isChecked = this.checked;
        if (currentCB.is(".groupHeadCheck")) {
             currentCB.parents('tr').find('[type="checkbox"]').prop('checked', isChecked);
        } 

        $(document).find('tr').each(function(){
           var total_chk_in_row = jQuery(this).find('[type="checkbox"]').length;
           var total_checked_chk = jQuery(this).find('td > [type="checkbox"]:checked').length;

           if((total_chk_in_row - 1) == total_checked_chk){
                jQuery(this).find('.groupHeadCheck').prop('checked',true);
           }

        });
    });

     $(document).find('tr').each(function(){
           var total_chk_in_row = jQuery(this).find('[type="checkbox"]').length;
           var total_checked_chk = jQuery(this).find('td > [type="checkbox"]:checked').length;

           if((total_chk_in_row - 1) == total_checked_chk){
                jQuery(this).find('.groupHeadCheck').prop('checked',true);
           }

     });

    $(".groupHead").next().find("[type=checkbox]").change();
</script>

</body>
</html>

p >

0 commentaires

1
votes

Vous pouvez essayer la méthode suivante:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
    <tbody>
        <tr>
            <th>
                1. <input type="checkbox" class="groupHeadCheck" />
            </th>
            <td>
                <input type="checkbox" id="1" />
            </td>
            <td>
                <input type="checkbox" id="2" />
            </td>
            <td>
                <input type="checkbox" id="3" />
            </td>
        </tr>
        <tr>
            <th>
                2. <input type="checkbox" class="groupHeadCheck" />
            </th>
            <td>
                <input type="checkbox" id="4" />
            </td>
        </tr>
        <tr>
            <th>
               3.  <input type="checkbox" class="groupHeadCheck" />
            </th>
            <td>
                <input type="checkbox" id="6" checked="checked" />
            </td>
            <td>
                <input type="checkbox" id="7" checked="checked"/>
            </td>
        </tr>        
    </tbody>
</table>

$("table tbody").on("change", "input[type=checkbox]", function (e) { 
    if($(this).hasClass('groupHeadCheck') && $(this).is(':checked')){
      $(this).closest('tr').find('td input').prop('checked', 'checked');
    }
    else if($(this).hasClass('groupHeadCheck') && $(this).not(':checked')){
      $(this).closest('tr').find('td input').removeAttr('checked');
    }
    
    if(!$(this).hasClass('groupHeadCheck')){
      var total = $(this).closest('tr').find('td input').length;
      var chekced = $(this).closest('tr').find('td input:checked').length;
      if(total == chekced){
        $(this).closest('tr').find('th .groupHeadCheck').prop('checked', 'checked');
      }
      else{
        $(this).closest('tr').find('th .groupHeadCheck').removeAttr('checked');
      }
    }
});

0 commentaires

1
votes

Vous pouvez également l'utiliser pour cocher les cases du maître au début

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
    <tbody>
        <tr>
            <th>
                1. <input type="checkbox" class="groupHeadCheck" />
            </th>
            <td>
                <input type="checkbox" id="1" />
            </td>
            <td>
                <input type="checkbox" id="2" />
            </td>
            <td>
                <input type="checkbox" id="3" />
            </td>
        </tr>
        <tr>
            <th>
                2. <input type="checkbox" class="groupHeadCheck" />
            </th>
            <td>
                <input type="checkbox" id="4" />
            </td>
        </tr>
        <tr>
            <th>
               3.  <input type="checkbox" class="groupHeadCheck" />
            </th>
            <td>
                <input type="checkbox" id="6" checked="checked" />
            </td>
            <td>
                <input type="checkbox" id="7" checked="checked"/>
            </td>
        </tr>        
    </tbody>
</table>

.groupHead td { background-color: #CCC; }

$("table tbody")
  .each((index, tbody) => {
    $(tbody).find('tr').each((index, tr) => checkMasterCheckboxesInTr(tr))
  })
  .on("change", "input[type=checkbox]", function (e) { 
      var currentCB = $(this);
      var isChecked = this.checked;

      if (currentCB.is(".groupHeadCheck")) {
          var allCbs = currentCB.closest('tr').find('[type="checkbox"]').prop('checked', isChecked);
      } else {
          checkMasterCheckboxesInTr(currentCB.closest('tr'))
      }
  });

function checkMasterCheckboxesInTr(tr) {
  var allCbs = $(tr).find('[type="checkbox"]');
  var allSlaves = allCbs.not(".groupHeadCheck");
  var master = allCbs.filter(".groupHeadCheck");
  var allChecked = allSlaves.filter(":checked").length === allSlaves.length;
  master.prop("checked", allChecked);
}

0 commentaires