數組中的複選框上的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

回答

相關問題