[英]How do I select all check box when I click on Select button using jQuery
我有HTML頁面，其中有多個復選框，可以單獨檢查它們。 我有按鈕select ，所以我想做的是。 當我單擊全選時，所有復選框應被選中，然后取消選中。
HTML
<html> <head> <script src="jquery.js"></script> </head> <body> <script> $(document).ready(function() { $('#selectAll').click(function(event) { //on click if(this.checked) { // check select status $('.btn-chk').each(function() { //loop through each checkbox this.checked = true; //select all checkboxes with class "checkbox1" }); }else{ $('.btn-chk').each(function() { //loop through each checkbox this.checked = false; //deselect all checkboxes with class "checkbox1" }); } }); }); </script> <table id="example" cellspacing="0" width="20%"> <thead> <tr> <th><button type="button" id="selectAll" class="myClass">Select</button></th> <th>number</th> <th>company</th> <th> Type</th> <th> Address</th> <th>Code</th> </tr> </thead> <tbody> <tr> <td><span class="button-checkbox"> <button type="button" class="btn-chk" data-color="success"></button> <input type="checkbox" class="hidden" /> </span> </td> <td>1</td> <td>APPLE</td> <td>IT</td> <td>San Jones</td> <td>US</td> </tr> <tr> <td><span class="button-checkbox"> <button type="button" class="btn-chk" data-color="success"></button> <input type="checkbox" class="hidden" /> </span> </td> <td>2</td> <td>DELL</td> <td>IT</td> <td>San Jones</td> <td>US</td> </tr> <tr> <td><span class="button-checkbox"> <button type="button" class="btn-chk" data-color="success"></button> <input type="checkbox" class="hidden" /> </span> </td> <td>3</td> <td>Amazon</td> <td>IT</td> <td>San Jones</td> <td>US</td> </tr> <tr> <td><span class="button-checkbox"> <button type="button" class="btn-chk" data-color="success"></button> <input type="checkbox" class="hidden" /> </span> </td> <td>4</td> <td>Microsoft</td> <td>IT</td> <td>San Jones</td> <td>US</td> </tr> </tbody> </body> </html>
輸出量
在圖像中，我有選擇按鈕。 我想要的是當我單擊選擇按鈕時，所有復選框都應該被選中
如果要切換復選框狀態，可以這樣
var chkd = true;
$('#selectAll').click(function(event) {
$(":checkbox").prop("checked", chkd);
chkd = !chkd;
});
#selectAll是一個按鈕，它沒有checked屬性，但是可以使用data屬性來模擬它。
其次， .btn-chk也不是一個復選框，因此無法選中它，您必須定位該復選框
$(document).ready(function() {
$('#selectAll').click(function(event) {
var checked = !$(this).data('checked');
$('.btn-chk').next().prop('checked', checked);
$(this).data('checked', checked);
});
});
一個簡單的方法如下所示：
$(function() {
$('#selectAll').click(function() {
$(':checkbox').prop('checked', !$(':checkbox').prop('checked'));
});
});
檢查這個jsFiddle
$(document).ready(function() {
$('#selectAll').click(function() {
$(':checkbox').prop('checked', !$(':checkbox').prop('checked'));
});
});
您可以簡單地使用它。有關jQuery的更多信息，請訪問w3schools-jquery
嘗試這個-
var checked = true;
$('#selectAll').click(function(event) {
$('table tr').each(function( index ) {
$(this).find('input[type="checkbox"]').prop(checked, true);
});
checked = !checked;
});
將您的jQuery代碼更改為
$('#selectAll').click(function(event) { //on click
if($('.hidden').prop('checked') == false) { // check select status
$('.hidden').each(function() { //loop through each checkbox
this.checked = true; //select all checkboxes with class "checkbox1"
});
}else{
$('.hidden').each(function() { //loop through each checkbox
this.checked = false; //deselect all checkboxes with class "checkbox1"
});
}
});
這將切換之間的checked和unchecked的的checkboxes當你點擊button 。
在“點擊”功能中，“此”是按鈕，而不是復選框。 和按鈕屬性檢查不足。 “ $（'。btn-chk'）。each”-在類為“ .btn-chk”的每個元素上循環，在您的HTML中是按鈕而不是復選框。
在您的上下文中，“＃selectAll”必須是一個復選框，並將類“ .btn-chk”放在您的復選框中
您也可以使用':checkbox'選擇器來做到這一點。
$(document).ready(function () {
$('#selectAll').on('click', function () {
$(':checkbox').each(function () {
$(this).click();
});
});
});
這絕對可以。
$("#selectAll").click(function(){
var checked = !$(this).data('checked');
$('.btn-chk').prop('checked', checked);
$(this).data('checked', checked);
});
當我使用select2 jquery選擇'ALL'項目時，如何禁用選擇框中的所有項目
[英]How to disable all items in select box when i am selecting 'ALL' item using select2 jquery
如何使用jQuery忽略發送到服務器的元素列表中的“全選”復選框？
[英]How do I use jQuery to omit the “Select All” check box from the list of elements sent to the server?
我如何 select 所有 p 標簽並在單擊復選框時使它們可見？
[英]How do I select all p tags and make them visible when check box is clicked?
使用JavaScript或jQuery，如何檢查選擇框是否與原始值匹配？
[英]Using JavaScript or jQuery, how do I check if select box matches original value?
如果用戶未選中復選框或單選按鈕，如何為復選框或單選按鈕設置一些默認值
[英]how do I set some default value for a check box or a radio button if user do not check the check box or select a button
使用d3-如何在單擊按鈕時從數組中選擇特定數據以突出顯示？
[英]Using d3 - How do I select specific data from array to highlight when I click a button?
如何使用jquery選擇“向上鑽取”按鈕，以便可以執行on click事件？
[英]How to select the drillup button using jquery, so I can do an on click event?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.