여러 함수 목록 내에서 모든 체크 박스를 선택하기위한 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); 
    } 
});