在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中獲取包含表中的所有輸入

回答

相關問題