Markieren Sie alle in Kontrollkästchen gleichzeitig mit mehreren alle wählen

Question

Kann ich fragen, wie man ein "Alles auswählen" in einem Kontrollkästchen gleichzeitig mit mehreren alle auswählen?

$(document).ready(function() { 
 
    $('.allcheckboxes').click(function() { 
 
     $(this).next().parent().parent().parent().toggleClass('checkallbox'); 
 

 
     if($('#selectall_wrapper').hasClass('checkallbox')) { 
 

 
      $('#selectall_wrapper input[type="checkbox"]').prop('checked', true); 
 

 
     } else { 
 
      $('#selectall_wrapper input[type="checkbox"]').prop('checked', false); 
 
     } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="selectall_wrapper"> 
 
    <li> 
 
     <div class="form-group"> 
 
      <input id="checkedall" class="allcheckboxes" type="checkbox"> 
 
      <label for="checkedall">Select all services</label> 
 
     </div> 
 
    </li> 
 

 
    <li> 
 
     <div class="form-group"> 
 
      <input id="checkbox1" type="checkbox"> 
 
      <label for="checkbox1">Service 1</label> 
 
     </div> 
 
    </li> 
 

 
    <li> 
 
     <div class="form-group"> 
 
      <input id="checkbox2" type="checkbox"> 
 
      <label for="checkbox2">Service 2</label> 
 
     </div> 
 
    </li> 
 

 
    <li> 
 
     <div class="form-group"> 
 
      <input id="checkbox3" type="checkbox"> 
 
      <label for="checkbox3">Service 3</label> 
 
     </div> 
 
    </li> 
 
</ul> 
 

 

 
<ul id="selectall_wrapper"> 
 
    <li> 
 
     <div class="form-group"> 
 
      <input id="checkedall" class="allcheckboxes" type="checkbox"> 
 
      <label for="checkedall">Select all products</label> 
 
     </div> 
 
    </li> 
 

 
    <li> 
 
     <div class="form-group"> 
 
      <input id="checkbox1" type="checkbox"> 
 
      <label for="checkbox1">product 1</label> 
 
     </div> 
 
    </li> 
 

 
    <li> 
 
     <div class="form-group"> 
 
      <input id="checkbox2" type="checkbox"> 
 
      <label for="checkbox2">product 2</label> 
 
     </div> 
 
    </li> 
 

 
    <li> 
 
     <div class="form-group"> 
 
      <input id="checkbox3" type="checkbox"> 
 
      <label for="checkbox3">product 3</label> 
 
     </div> 
 
    </li> 
 
</ul>

Answer 1

Code verwenden, können Sie einen anderen Wrapper verwenden und auf Ihre Funktion hinzufügen. (Dies könnte gereinigt werden und stark vereinfacht, aber Sie bekommen die Idee.)

$(document).ready(function() { 
 
    $('.allcheckboxes').click(function() { 
 
     $(this).next().parent().parent().parent().toggleClass('checkallbox'); 
 

 
     if($('#selectall_wrapper').hasClass('checkallbox')) { 
 

 
      $('#selectall_wrapper input[type="checkbox"]').prop('checked', true); 
 

 
     } else{ 
 
      $('#selectall_wrapper input[type="checkbox"]').prop('checked', false); 
 
     } if($('#selectall_wrapper_2').hasClass('checkallbox')) { 
 

 
      $('#selectall_wrapper_2 input[type="checkbox"]').prop('checked', true); 
 

 
     } else { 
 
      $('#selectall_wrapper_2 input[type="checkbox"]').prop('checked', false); 
 
     } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="selectall_wrapper"> 
 
    <li> 
 
     <div class="form-group"> 
 
      <input id="checkedall" class="allcheckboxes" type="checkbox"> 
 
      <label for="checkedall">Select all services</label> 
 
     </div> 
 
    </li> 
 

 
    <li> 
 
     <div class="form-group"> 
 
      <input id="checkbox1" type="checkbox"> 
 
      <label for="checkbox1">Service 1</label> 
 
     </div> 
 
    </li> 
 

 
    <li> 
 
     <div class="form-group"> 
 
      <input id="checkbox2" type="checkbox"> 
 
      <label for="checkbox2">Service 2</label> 
 
     </div> 
 
    </li> 
 

 
    <li> 
 
     <div class="form-group"> 
 
      <input id="checkbox3" type="checkbox"> 
 
      <label for="checkbox3">Service 3</label> 
 
     </div> 
 
    </li> 
 
</ul> 
 

 

 
<ul id="selectall_wrapper_2"> 
 
    <li> 
 
     <div class="form-group"> 
 
      <input id="checkedall_2" class="allcheckboxes" type="checkbox"> 
 
      <label for="checkedall_2">Select all products</label> 
 
     </div> 
 
    </li> 
 

 
    <li> 
 
     <div class="form-group"> 
 
      <input id="checkbox1" type="checkbox"> 
 
      <label for="checkbox1">product 1</label> 
 
     </div> 
 
    </li> 
 

 
    <li> 
 
     <div class="form-group"> 
 
      <input id="checkbox2" type="checkbox"> 
 
      <label for="checkbox2">product 2</label> 
 
     </div> 
 
    </li> 
 

 
    <li> 
 
     <div class="form-group"> 
 
      <input id="checkbox3" type="checkbox"> 
 
      <label for="checkbox3">product 3</label> 
 
     </div> 
 
    </li> 
 
</ul>