在jQuery中获取包含表中的所有输入

我试图在jQuery中创建一个'全选'样式复选框。这里是当前的标记：在jQuery中获取包含表中的所有输入

<table> 
    <thead> 
    <tr> 
     <th><input class='select-all' type='checkbox' /></th> 
     //etc.. 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td><input class='list-select' type='checkbox' /><td> 
    //etc.. 
    </tr> 
    //more <tr>s.. 
    </tbody> 
</table>

什么是让所有的“列表中选择”复选框，从选择所有的复选框的Click事件的最简单的方法？

$(".select-all").click(function() { 

});

页面上可能存在多于一个，所以它必须是相对的。即我不能只用$(".list-select")

来源

2012-01-10 GSto

这里有一个快速的小提琴例如：http://jsfiddle.net/ru3Nv/

其核心是：

$('.select-all').click(function(){ 
    $(this).parents('table').find('.list-select').prop("checked", $(this).prop("checked")); 
});

请注意，我也建议在.list_select框添加监听器，这样，如果其中任何一个成为选中，选择全部变为未选中，并且如果全部被单独检查，那么选择全部也被检查。

来源

2012-01-10 17:50:41 j08691

不错。我不知道“父母（）”的功能。我曾尝试使用'parent（）'做类似的事情，但它不会那样工作。另外，对于列表选择检查的附加侦听器也是个好主意 – GSto 2012-01-10 19:07:23

（对不起，误读的问题在第一。）

可能上升到最近的table，然后下到.list-select：

var select = $(this).closest('table').find('.list-select');

（this将被点击的.select-all，因为这是在事件处理程序中。）

closest从你给它的元素开始，向上移动到层次结构中以找到匹配，然后停下找到的第一个匹配项。然后find是相反的，它从那里去找到匹配选择器的后代元素。

来源

2012-01-10 17:35:55

如果选择所有复选框总是在表的<thead>，那么你可以使用：

$(this).parents('table').find('.list-select').prop('checked', true);

来源

2012-01-10 17:41:24

'父母'会发现所有**'表格元素是祖先，而不是停在第一个。 “最接近”是一个更好的选择。 – 2012-01-10 17:45:43

你说得对，虽然我不认为SO是嵌套表格，“最接近”更精确，它更有效率，并且总是返回一个单一元素。 – 2012-01-10 17:52:52

我想你尝试实现这一点：

$(".select-all").change(function(){ 
    if($(this).attr("checked")=="checked"){ 
    $(".list-select").attr("checked","checked"); 
    } 
    else{ 
    $(".list-select").removeAttr("checked"); 
    } 
});

，让您的。全选复选框的功能来选择和取消选择所有.list-select复选框。

来源

2012-01-10 17:49:24

在jQuery中获取包含表中的所有输入

回答

相关问题