모두 검사 (복수 그룹)

Question

동일한 클래스 이름을 가진 테이블이 여러 개 있습니다. 나는 각 테이블에 check-all/uncheck 체크 박스가 필요하며, 다른 테이블의 체크 박스를 체크/체크하지 않는다.

여기에 다른 코드가있어 작동하는 것 같았습니다. 그러나, 그것을 내 시나리오에 연결하려고 시도했을 때 전혀 작동하지 않았습니다. 내 jquery 예제의 코드만큼 깨끗한 코드를 사용할 수 있기를 희망합니다. 그러나 코드를 작동시키기 위해 다른 코드로 변경해야하는 경우 다른 코드를 자유롭게 보여주십시오. 나는 선택의 여지가 있으며 가능한 최선의 방법을 확실히하고 싶습니다. 이것은 프로젝트를위한 것입니다. 그러나 앞으로의 프로젝트에서이 작업을 계속 사용할 수 있도록이 작업을 수행하는 방법을 배우기를 희망합니다.

나는 javascript/jquery에 새로 온 것처럼 모든 도움을받을 수있다.

jQuery를

$('#chkSelectAll').click(function() { 
     if ($(this).is(':checked')) { 
      $('.permissions > input[type=checkbox]').each(function() { 
       $(this).prop("checked", true); 
      }); 
     } 
     else { 
      $('.permissions input[type=checkbox]').each(function() { 
       $(this).prop("checked", false); $('#sel').text('Select All'); 
      }); 
     } 
    }); 

HTML

<table id="table1" class="permissions"> 
<tr class="SLheader"><td><b>TABLE 1</b></td><td><input type="checkbox" id="chkSelectAll" /></td></tr> 
<tr class="second"><td>First Row</td><td><input type="checkbox" name="first"></td></tr> 
<tr><td>Second Row</td><td><input type="checkbox" name="second"></td></tr> 
<tr class="second"><td>Third Row</td><td><input type="checkbox" name="third"></td></tr> 
</table> 

    <br /> 

    <table id="table1" class="permissions"> 
<tr class="SLheader"><td><b>TABLE 2</b></td><td><input type="checkbox" id="chkSelectAll" /></td></tr> 
<tr class="second"><td>First Row</td><td><input type="checkbox" name="first"></td></tr> 
<tr><td>Second Row</td><td><input type="checkbox" name="second"></td></tr> 
<tr class="second"><td>Third Row</td><td><input type="checkbox" name="third"></td></tr> 
</table> 

    <br /> 

    <table id="table1" class="permissions"> 
<tr class="SLheader"><td><b>TABLE 3</b></td><td><input type="checkbox" id="chkSelectAll" /></td></tr> 
<tr class="second"><td>First Row</td><td><input type="checkbox" name="first"></td></tr> 
<tr><td>Second Row</td><td><input type="checkbox" name="second"></td></tr> 
<tr class="second"><td>Third Row</td><td><input type="checkbox" name="third"></td></tr> 
</table> 

JSFiddle : http://jsfiddle.net/sfu7h8wf/

이 jQuery 코드가 전혀 작동하지 않습니다. 나는 그것이 효과가 있는지보기 위해 변경을 시도했다. 그러나, 나는 그것을 내가 찾고있는 것을 설명하기위한 모범으로 사용하고있다. ID가 문제를 해결

Answer 1

, 시도 :

$('.chkSelectAll').click(function() { 
    $(this).closest('table').find('input[type="checkbox"]:gt(0)').prop('checked', $(this).prop('checked')) 
}); 
$('.permissions').find('input[type="checkbox"]:gt(0)').change(function() { 
    var totalSibs = $(this).closest('table').find('input[type="checkbox"]:gt(0)').length; 
    var checkedSibs = $(this).closest('table').find('input[type="checkbox"]:gt(0):checked').length; 
    if (checkedSibs === 0) { 
     $(this).closest('table').find('input[type="checkbox"]:first').prop('checked', false); 
     $(this).closest('table').find('input[type="checkbox"]:first').prop('indeterminate', false); 
    } else if (checkedSibs === totalSibs) { 
     $(this).closest('table').find('input[type="checkbox"]:first').prop('checked', true); 
     $(this).closest('table').find('input[type="checkbox"]:first').prop('indeterminate', false); 
    } else { 
     $(this).closest('table').find('input[type="checkbox"]:first').prop('indeterminate', true) 
    } 
}) 

jsFiddle example