檢查全部（多組）

我有多個具有相同類名的表。我需要每個表在每個表內都有一個全選/全部取消選中複選框，並在其自己的表中檢查/取消選中所有其他複選框。檢查全部（多組）

我在這裏發現了其他代碼，看起來好像會起作用;但是，當試圖將其插入到我的方案中時，它根本不起作用。我希望能夠使用接近於我的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

檢查全部（多組）

回答

相關問題