数组中的复选框上的Jquery.change

这是一个带有嵌套gridviews的asp.net webforms页面。数组中的复选框上的Jquery.change

我有一个表，动态地添加每个行下的多个“详细信息”表。细节表在标题中有一个“全选”复选框，在其下面的每一行都有一个复选框。

我试图在选中标题级复选框时选择所有子行复选框。

<div> 
<table class="details"> 
    <tbody> 
     <tr style="white-space:nowrap;"> 
      <th scope="col"> 
       <span class="ckbSelectAll"> 
        <input type="checkbox" /> 
       </span> 
      </th> 
      <th scope="col">number</th> 
      <th scope="col">Status</th> 
     </tr> 
     <tr> 
      <td> 
       <span class="ckbResults"> 
        <input type="checkbox" /> 
       </span> 
      </td> 
      <td>121223</td> 
      <td>Open</td> 
     </tr> 
    </tbody> 
</table>

我能找到的所有头级别的复选框（ckbSelectAll）通过寻找类和寻找的复选框。我看到我有一个包含所有标题级别复选框的数组，但.change似乎没有触发任何一个。

$.each($('.ckbSelectAll input[type="checkbox"]'),function (index, value) { 
$(value).change(function() { 
    alert('checked'); 
}) });

我想这可能是.change，我已经用。对（“改变”，（）的函数和。对（“点击”，（）的函数尝试，但就是无法获得点击或改变触发警报

来源

2017-03-15 InsertOldUserIDHere

'$ .each（）'是为数组或对象设计的。建议使用'.each（）'。像这样：'$（'.ckbSelectAll input [type =“checkbox”]'）。each（function（ind，el）{$（el）.change（function（）{alert（“checked”）;}）; }）;' – Twisty

事实证明，我的问题是与子表。它们在检查页面时可见，但在用户展开之前不显示。我在问题中使用了相同的JavaScript，

$.each($('.ckbSelectAll input[type="checkbox"]'),function (index, value) { $(value).change(function() { 
alert('checked'); }) });

但使它成为在展开时调用的函数。现在，它正确地连接到选择器，并且一切正常。

来源

2017-04-04 19:07:02 InsertOldUserIDHere

这是使用.each()和.prop()做得最好

工作例：https://jsfiddle.net/Twisty/6Lowt85a/

HTML

<table class="details"> 
    <thead> 
    <tr style="white-space:nowrap;"> 
     <th scope="col"> 
     <span class="ckbSelectAll"> 
     <input type="checkbox" /> 
     </span> 
     </th> 
     <th scope="col">number</th> 
     <th scope="col">Status</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td> 
     <span class="ckbResults"> 
     <input type="checkbox" /> 
     </span> 
     </td> 
     <td>112233</td> 
     <td>Open</td> 
    </tr> 
    <tr> 
     <td> 
     <span class="ckbResults"> 
     <input type="checkbox" /> 
     </span> 
     </td> 
     <td>112234</td> 
     <td>Open</td> 
    </tr> 
    <tr> 
     <td> 
     <span class="ckbResults"> 
     <input type="checkbox" /> 
     </span> 
     </td> 
     <td>112235</td> 
     <td>Open</td> 
    </tr> 
    </tbody> 
</table>

的JavaScript

$(function() { 
    $(".ckbSelectAll input").change(function() { 
    var checked = $(this).is(":checked"); 
    $(".ckbResults input").each(function(index, elem) { 
     $(elem).prop("checked", checked); 
    }); 
    }); 
});

更新

在多个表的情况下，我建议是这样的：

$(function() { 
    $(".ckbSelectAll input").change(function() { 
    var checked = $(this).is(":checked"); 
    var parentTable = $(this).closest("table"); 
    parentTable.find(".ckbResults input").each(function(index, elem) { 
     $(elem).prop("checked", checked); 
    }); 
    }); 
});

当在特定的复选框标题被点击，相关的复选框在中该表将被选中或取消选中。

来源

2017-03-15 22:22:25 Twisty

更深一层的例子：https：//jsfiddle.net/Twisty/6Lowt85a/4/ – Twisty

主要的问题是添加了多个添加了“ckbSelectAll”复选框的表格。所以我需要观察其中的每一个，并且知道什么时候改变了，因为检查一个选择应该只选择表格中的checkox。 – InsertOldUserIDHere

@InsertOldUserID这很容易。你可以用几种方法来完成。观看每个人，像你建议或将行动与某个特定父母结婚。 – Twisty

您可以使用下面的代码，即使你有在同一页面超过1台，则只需确保main checkbox有ckbSelectAll类：

$('.ckbSelectAll > input').on('change', function(){ 
    var $this = $(this); 
    $this.closest('thead') 
     .next() 
     .find('input[type=checkbox]') 
     .prop('checked', $this.is(':checked')); 
});

请注意，如果你有一些复选框在tbody你不要”不想让你的代码的效果，只需添加css-class到sub-checkboxes（我的意思是，你需要检查复选框/取消勾选main checkbox）和更改代码如下：

$('.ckbSelectAll > input').on('change', function(){ 
    var $this = $(this); 
    $this.closest('thead') 
     .next() 
     .find('input[type=checkbox].my-class-name') 
     .prop('checked', $this.is(':checked')); 
});

jsfiddle

来源

2017-03-17 10:27:03

数组中的复选框上的Jquery.change

回答

相关问题