检查全部（多组）

我有多个具有相同类名的表。我需要每个表在每个表内都有一个全选/全部取消选中复选框，并在其自己的表中检查/取消选中所有其他复选框。检查全部（多组）

我在这里发现了其他代码，看起来好像会起作用;但是，当试图将其插入到我的方案中时，它根本不起作用。我希望能够使用接近于我的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代码不工作，在所有。我试图确定更改是否可行。不过，我用它作为例子来解释我在找什么。

来源

2014-09-23 KDJ127

我知道。我从另一个只使用了1个全部检查的例子中提取了这个jquery代码。我只是不知道如何操作它来处理所有的表格。出于这个原因，我在表格中使用类。 – KDJ127 2014-09-23 20:02:01

固定的ID问题，请尝试：

$('.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

来源

2014-09-23 20:03:07 j08691

这是完美的;不过，我注意到，当其中一个复选框未选中时，全选复选框不会取消选中。有没有办法做到这一点？ – KDJ127 2014-09-23 20:06:01

这里是一个更强大的一个，我认为这是你在你的评论中寻找的内容：http://jsfiddle.net/j08691/sfu7h8wf/2/ – j08691 2014-09-23 20:09:03

这真棒！完全按照我想要的方式工作。我会尽快接受你的回答。 – KDJ127 2014-09-23 20:10:32

检查全部（多组）

回答

相关问题