Каждая функция jquery для выбора всех флажков в нескольких списках

Question

У меня есть список флажков в нескольких тегах ul. Я хочу отключить и проверить все, используя href для каждого списка. (Будет несколько списков, здесь я предоставил HTML для двух списков). Код не работает, потому что флажки не все отмечены или не отмечены щелчком. Может ли кто-нибудь помочь?

Вот что я пытался до сих пор в JSFIDDLE

<div class="col-xs-4 col-lg-3"> 
     <div class="btn-group options" id="checkboxes-div-1" class="checkbox-div"> 
     <button class="btn btn-default dropdown-toggle open-first" type="button" data-toggle="dropdown" > 
      Select one or more options <span class="caret"></span> 
     </button> 
     <ul class="dropdown-menu check-first" id="close-out" role="menu" name="form3"> 
      <li class="option"> 
      <a class="checkall show-cross-2" href="#">Check all</a> 
      <a class="uncheckall" href="#">Uncheck all</a> 
      </li> 
      <li><strong>Group 1</strong></li> 
      <li class="option"> 
      <div class="checkbox"> 
       <label> 
       <input type="checkbox" class="only-this show-cross-2">Option #1 for group 1 
      </label> 
      </div> 
     </li> 
     <li class="option"> 
      <div class="checkbox"> 
      <label> 
      <input type="checkbox" class="only-this show-cross-2">Option #2 for group 1 
      </label> 
     </div> 
     </li> 
     <li class="option"> 
     <div class="checkbox"> 
      <label> 
      <input type="checkbox" class="only-this show-cross-2">Option #3 for group 1 
     </label> 
     </div> 
    </li> 
    <li><strong>Group 2</strong></li> 
    <li class="option"> 
     <div class="checkbox"> 
     <label> 
     <input type="checkbox" >Forum 
     </label> 
    </div> 
    </li> 
    <li class="option"> 
    <div class="checkbox"> 
     <label> 
     <input type="checkbox">Ipsum 
    </label> 
    </div> 
</li> 
<li class="option"> 
    <div class="checkbox"> 
    <label> 
    <input type="checkbox">Dorol 
    </label> 
</div> 
</li> 
</ul> 
</div> <!--/.btn-group--> 
</div> <!--/.col-xs-6--> 



</div> <!--/.third-row--> 

<div class="row fourth-row"> 

     <div class="col-xs-4 col-lg-3"> 
     <div class="btn-group options hide" id="checkboxes-div-2" class="checkbox-div"> 
     <button class="btn btn-default dropdown-toggle open-second" type="button" data-toggle="dropdown" > 
      Select one or more options <span class="caret"></span> 
     </button> 
     <ul class="dropdown-menu check-second" id="close-out" role="menu" name="form3"> 
      <li class="option"> 
      <a class="checkall show-cross-2" href="#">Check all</a> 
      <a class="uncheckall" href="#">Uncheck all</a> 
      </li> 
      <li><strong>Group 1</strong></li> 
      <li class="option"> 
      <div class="checkbox"> 
       <label> 
       <input type="checkbox" >Option #1 for group 1 
      </label> 
      </div> 
     </li> 
     <li class="option"> 
      <div class="checkbox"> 
      <label> 
      <input type="checkbox" >Option #2 for group 1 
      </label> 
     </div> 
     </li> 
     <li class="option"> 
     <div class="checkbox"> 
      <label> 
      <input type="checkbox" >Option #3 for group 1 
     </label> 
     </div> 
    </li> 
    <li><strong>Group 2</strong></li> 
    <li class="option"> 
     <div class="checkbox"> 
     <label> 
     <input type="checkbox">Forum 
     </label> 
    </div> 
    </li> 
    <li class="option"> 
    <div class="checkbox"> 
     <label> 
     <input type="checkbox">Ipsum 
    </label> 
    </div> 
</li> 
<li class="option"> 
    <div class="checkbox"> 
    <label> 
    <input type="checkbox">Dorol 
    </label> 
</div> 
</li> 
</ul> 
</div> <!--/.btn-group--> 
</div> <!--/.col-xs-6--> 

</div> <!--/.fourth-row--> 

Мой JQuery:

$.each($('.checkbox-div'), function() { 
     $(".checkall").click(function() { 
      $(":checkbox.only-this").attr("checked", true); 
     }) 
     $(".uncheckall").click(function() { 
      $(":checkbox").attr("checked", false); 
     }) 
}); 

http://jsfiddle.net/r2yLq61o/

Answer 1

Используйте вместо этого:

$(".checkall").click(function() { 
 
    $(this).closest('ul').find('input[type="checkbox"]').prop("checked", true); 
 
}) 
 
$(".uncheckall").click(function() { 
 
    $(this).closest('ul').find('input[type="checkbox"]').prop("checked", false); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="col-xs-4 col-lg-3"> 
 
    <div class="btn-group options" id="checkboxes-div-1" class="checkbox-div"> 
 
     <button class="btn btn-default dropdown-toggle open-first" type="button" data-toggle="dropdown">Select one or more options <span class="caret"></span> 
 

 
     </button> 
 
     <ul class="dropdown-menu check-first" id="close-out" role="menu" name="form3"> 
 
      <li class="option"> <a class="checkall show-cross-2" href="#">Check all</a> 
 
<a class="uncheckall" href="#">Uncheck all</a> 
 

 
      </li> 
 
      <li><strong>Group 1</strong> 
 

 
      </li> 
 
      <li class="option"> 
 
       <div class="checkbox"> 
 
        <label> 
 
         <input type="checkbox" class="only-this show-cross-2">Option #1 for group 1</label> 
 
       </div> 
 
      </li> 
 
      <li class="option"> 
 
       <div class="checkbox"> 
 
        <label> 
 
         <input type="checkbox" class="only-this show-cross-2">Option #2 for group 1</label> 
 
       </div> 
 
      </li> 
 
      <li class="option"> 
 
       <div class="checkbox"> 
 
        <label> 
 
         <input type="checkbox" class="only-this show-cross-2">Option #3 for group 1</label> 
 
       </div> 
 
      </li> 
 
      <li><strong>Group 2</strong> 
 

 
      </li> 
 
      <li class="option"> 
 
       <div class="checkbox"> 
 
        <label> 
 
         <input type="checkbox">Forum</label> 
 
       </div> 
 
      </li> 
 
      <li class="option"> 
 
       <div class="checkbox"> 
 
        <label> 
 
         <input type="checkbox">Ipsum</label> 
 
       </div> 
 
      </li> 
 
      <li class="option"> 
 
       <div class="checkbox"> 
 
        <label> 
 
         <input type="checkbox">Dorol</label> 
 
       </div> 
 
      </li> 
 
     </ul> 
 
    </div> 
 
    <!--/.btn-group--> 
 
</div> 
 
<!--/.col-xs-6--> 
 
</div> 
 
<!--/.third-row--> 
 
<div class="row fourth-row"> 
 
    <div class="col-xs-4 col-lg-3"> 
 
     <div class="btn-group options hide" id="checkboxes-div-2" class="checkbox-div"> 
 
      <button class="btn btn-default dropdown-toggle open-second" type="button" data-toggle="dropdown">Select one or more options <span class="caret"></span> 
 

 
      </button> 
 
      <ul class="dropdown-menu check-second" id="close-out" role="menu" name="form3"> 
 
       <li class="option"> <a class="checkall show-cross-2" href="#">Check all</a> 
 
<a class="uncheckall" href="#">Uncheck all</a> 
 

 
       </li> 
 
       <li><strong>Group 1</strong> 
 

 
       </li> 
 
       <li class="option"> 
 
        <div class="checkbox"> 
 
         <label> 
 
          <input type="checkbox">Option #1 for group 1</label> 
 
        </div> 
 
       </li> 
 
       <li class="option"> 
 
        <div class="checkbox"> 
 
         <label> 
 
          <input type="checkbox">Option #2 for group 1</label> 
 
        </div> 
 
       </li> 
 
       <li class="option"> 
 
        <div class="checkbox"> 
 
         <label> 
 
          <input type="checkbox">Option #3 for group 1</label> 
 
        </div> 
 
       </li> 
 
       <li><strong>Group 2</strong> 
 

 
       </li> 
 
       <li class="option"> 
 
        <div class="checkbox"> 
 
         <label> 
 
          <input type="checkbox">Forum</label> 
 
        </div> 
 
       </li> 
 
       <li class="option"> 
 
        <div class="checkbox"> 
 
         <label> 
 
          <input type="checkbox">Ipsum</label> 
 
        </div> 
 
       </li> 
 
       <li class="option"> 
 
        <div class="checkbox"> 
 
         <label> 
 
          <input type="checkbox">Dorol</label> 
 
        </div> 
 
       </li> 
 
      </ul> 
 
     </div> 
 
     <!--/.btn-group--> 
 
    </div> 
 
    <!--/.col-xs-6--> 
 
</div> 
 
<!--/.fourth-row-->

Answer 2

И еще один способ, более тесно связаны со структурой DOM:

Fiddle.

$(document).ready(function() 
{ 
    $(".checkall").click(function() 
    { 
     handleOptions(this, true); 
    }); 

    $(".uncheckall").click(function() 
    { 
     handleOptions(this, false); 
    }); 

    function handleOptions(element, value) 
    { 
     var optionBlocks = $(element).parent().siblings('.option'); 
     optionBlocks.find("input").prop("checked", value); 
    } 
});