當我點擊使用jQuery的選擇按鈕時，如何選擇所有複選框

我有HTML頁面，它有多個複選框，並且可以單獨檢查它們。我有按鈕select，所以我想要做的是。當我點擊選擇所有的複選框應該被選中，並取消選擇。當我點擊使用jQuery的選擇按鈕時，如何選擇所有複選框

的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> 
 
\t <th><button type="button" id="selectAll" class="myClass">Select</button></th> 
 
\t \t <th>number</th> 
 
     <th>company</th> 
 
\t \t <th> Type</th> 
 
\t \t <th> Address</th> 
 
\t \t <th>Code</th> 
 
\t </tr> \t \t \t \t \t \t \t \t  \t 
 
</thead> 
 
\t \t \t 
 

 
<tbody> \t \t \t \t \t \t \t \t \t \t 
 
    <tr> \t \t \t \t \t \t \t \t \t \t \t 
 
    <td><span class="button-checkbox"> 
 
     <button type="button" class="btn-chk" data-color="success"></button> 
 
     <input type="checkbox" class="hidden" /> 
 
     </span> 
 
\t \t </td> 
 
\t \t <td>1</td> 
 
\t \t <td>APPLE</td> 
 
\t \t <td>IT</td> 
 
\t \t <td>San Jones</td> 
 
\t  <td>US</td> 
 
\t \t </tr> 
 
    
 
\t \t <tr> 
 
\t \t <td><span class="button-checkbox"> 
 
\t \t <button type="button" class="btn-chk" data-color="success"></button> 
 
\t  <input type="checkbox" class="hidden" /> 
 
\t \t </span> 
 
     </td> 
 
      <td>2</td> 
 
\t \t <td>DELL</td> 
 
\t \t <td>IT</td> 
 
      <td>San Jones</td> 
 
      <td>US</td> 
 
     </tr> 
 
    
 
     <tr> 
 
     <td><span class="button-checkbox"> 
 
\t <button type="button" class="btn-chk" data-color="success"></button>               
 
\t <input type="checkbox" class="hidden" /> 
 
     </span> 
 
\t </td> 
 
\t <td>3</td> 
 
\t <td>Amazon</td> 
 
\t <td>IT</td> 
 
\t <td>San Jones</td> 
 
\t <td>US</td> 
 
\t </tr> 
 
    
 
\t <tr> 
 
\t <td><span class="button-checkbox"> 
 
    <button type="button" class="btn-chk" data-color="success"></button> 
 
    <input type="checkbox" class="hidden" /> 
 
    </span> 
 
\t </td> 
 
\t <td>4</td> 
 
\t <td>Microsoft</td> 
 
\t <td>IT</td> 
 
\t <td>San Jones</td> 
 
\t <td>US</td> 
 
\t </tr> 
 
\t </tbody> 
 
\t \t \t \t \t \t \t \t \t 
 
</body> 
 
</html> \t \t \t \t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t \t \t \t

輸出

enter image description here

在我有選擇按鈕的圖像。我要的是當我點擊選擇按鈕所有複選框應該得到選擇

來源

2015-04-23 Varun

我不明白，你是否檢查選擇按鈕是否被選中，並使用結果來決定是否選擇全部或不選。一個按鈕不能被檢查？ –

你是否在這種功能之後：http://jsfiddle.net/Puddster/k9ryt981/？當你點擊頂部按鈕時，下面的所有內容都會被檢查？ – Pudd

您並未遍歷每個複選框。將.btn-chk更改爲.hidden以循環遍歷所有複選框。 – Zee

#selectAll是按鈕，它沒有checked屬性，但可以使用數據屬性來模擬該屬性。

其次，.btn-chk是不是一個複選框要麼，所以它不能被選中，你有目標的複選框

$(document).ready(function() { 
    $('#selectAll').click(function(event) { 
     var checked = !$(this).data('checked'); 

     $('.btn-chk').next().prop('checked', checked); 

     $(this).data('checked', checked); 
    }); 

});

FIDDLE

來源

2015-04-23 12:49:52 adeneo

如果要切換複選框狀態，你可以這樣做

var chkd = true; 
$('#selectAll').click(function(event) { 
    $(":checkbox").prop("checked", chkd); 
    chkd = !chkd; 
});

Fiddle

來源

2015-04-23 12:49:39

嘗試這個 -

var checked = true; 
$('#selectAll').click(function(event) { 
    $('table tr').each(function(index) { 
     $(this).find('input[type="checkbox"]').prop(checked, true); 
    }); 
    checked = !checked; 
});

來源

2015-04-23 12:56:20 mohit

我想OP也想取消選擇複選框，當再次點擊按鈕時。 – Rickkwa

簡單的方法如下：

$(function() { 
    $('#selectAll').click(function() { 
     $(':checkbox').prop('checked', !$(':checkbox').prop('checked')); 
    }); 
});

The Demo.

來源

2015-04-23 12:58:07 xdazz

檢查第一個複選框，然後單擊選擇按鈕。然後用第二個複選框重複相同的步驟並查看差異 –

改變你的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和checkboxes的unchecked之間切換，當你點擊button。

來源

2015-04-23 12:58:50 Zee

入住這jsFiddle

$(document).ready(function() { 
    $('#selectAll').click(function() { 
     $(':checkbox').prop('checked', !$(':checkbox').prop('checked')); 
    }); 
});

您可以簡單地使用它欲瞭解更多信息jQuery的訪問w3schools-jquery

來源

2015-04-23 13:02:31

「點擊」功能裏面的「這」按鈕，而不是一個複選框。並檢查按鈕屬性是未定義的。「$（'.btn-chk'）。each」 - 在每個元素上都帶有「.btn-chk」類的循環，在你的HTML中是按鈕而不是複選框。

在您的上下文中，「#selectAll」必須是複選框並放置類。btn-chk'

來源

2015-04-23 13:05:23

你可以用':checkbox'這個選擇器來做到這一點。

$(document).ready(function() { 

    $('#selectAll').on('click', function() { 
     $(':checkbox').each(function() { 

      $(this).click(); 
     }); 
    }); 
});

來源

2015-04-23 13:14:37

這一定會起作用。

$("#selectAll").click(function(){ 
    var checked = !$(this).data('checked'); 
    $('.btn-chk').prop('checked', checked);   
    $(this).data('checked', checked); 
});

來源

2017-01-26 09:36:11 JatinBhattPhp

當我點擊使用jQuery的選擇按鈕時，如何選擇所有複選框

回答

相關問題