[英]How to Select / Deselect All Checkboxes using jQuery with a one Button?
我想使用一個按鈕單擊，以在選擇特定div /表中的所有復選框與取消選擇所有復選框之間切換。 另外，我希望鏈接/按鈕將名稱更改為“全選”和“取消全選”。 我已經看到了使用復選框或兩次不同的按鈕單擊的類似答案，但與此無關。 我會使用jquery使其簡單明了。
的HTML
<body> <div id="main"> <div id="first"> <h1>Check & Uncheck All Options</h1> <p>Check & Uncheck All Options by Button</p> <input id="checkAll" type="button" value="Check/Uncheck All "> <div class="button"> <input class="first" id="Item 1" name="option1" type="checkbox"> <label class="label1" for="Item 1">Item 1</label> <input class="first" id="Item 2" name="option1" type="checkbox"> <label class="label1" for="Item 2">Item 2</label> <input class="first" id="Item 3" name="option1" type="checkbox"> <label class="label1" for="Item 3">Item 3</label> <input class="first" id="Item 4" name="option1" type="checkbox"> <label class="label1" for="Item 4">Item 4</label> </div> </body>
這樣吧：
$(function() { $(document).on('click', '#checkAll', function() { if ($(this).val() == 'Check All') { $('.button input').prop('checked', true); $(this).val('Uncheck All'); } else { $('.button input').prop('checked', false); $(this).val('Check All'); } }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <div id="main"> <div id="first"> <h1>Check & Uncheck All Options</h1> <p>Check & Uncheck All Options by Button</p> <input id="checkAll" type="button" value="Check All"> <div class="button"> <input class="first" id="Item 1" name="option1" type="checkbox"> <label class="label1" for="Item 1">Item 1</label> <input class="first" id="Item 2" name="option1" type="checkbox"> <label class="label1" for="Item 2">Item 2</label> <input class="first" id="Item 3" name="option1" type="checkbox"> <label class="label1" for="Item 3">Item 3</label> <input class="first" id="Item 4" name="option1" type="checkbox"> <label class="label1" for="Item 4">Item 4</label> </div> </body>
有一個維護復選框狀態的類。 使用它來切換復選框的checked屬性。
var $checkboxes = $('.first');
var $selectAllCheckbox = $('#checkAll');
$selectAllCheckbox.on('click', function() {
var $this = $(this);
var allChecked = true;
if ($this.hasClass('checked-all')) {
$this.removeClass('checked-all');
allChecked = false;
} else {
$this.addClass('checked-all');
}
$checkboxes.prop('checked', allChecked);
});
// Maintain the state if the checkbox is
// checked individually
$('.first').on('change', function() {
var isChecked = true;
$.each($checkboxes, function(i, checkbox) {
if(!$(checkbox).is(':checked')) {
isChecked = false;
}
});
isChecked ? $selectAllCheckbox.addClass('checked-all')
: $selectAllCheckbox.removeClass('checked-all');
});
試試這個代碼：
$('#checkAll').click(function(){
if($( 'input[name="option1"]:checked' ).length>0){//any one is checked
$('.button input').prop('checked', false);
}
else{
$('.button input').prop('checked', true);
}
})
<body>
<div id="main">
<div id="first">
<h1>Check & Uncheck All Options</h1>
<p>Check & Uncheck All Options by Button</p>
<input id="checkAll" type="button" value="Check All">
<div class="button">
<input class="first" id="Item 1" name="option1" type="checkbox">
<label class="label1" for="Item 1">Item 1</label>
<input class="first" id="Item 2" name="option1" type="checkbox">
<label class="label1" for="Item 2">Item 2</label>
<input class="first" id="Item 3" name="option1" type="checkbox">
<label class="label1" for="Item 3">Item 3</label>
<input class="first" id="Item 4" name="option1" type="checkbox">
<label class="label1" for="Item 4">Item 4</label>
</div>
</body>
<script>
jQuery(document).ready(function(e)
{
jQuery(".check_all").click(function()
{
jQuery(".all_checked").attr('checked', $(this).is(':checked') ? true : false);
})
});
</script>
的HTML
<input type="checkbox" class="check_all"/>
<input type="checkbox" class="all_checked"/>
<input type="checkbox" class="all_checked"/>
<input type="checkbox" class="all_checked"/>
Select / 在 Thymeleaf 中使用 jQuery 取消選擇所有復選框
[英]Select / Deselect All Checkboxes using jQuery in Thymeleaf
使用jQuery選擇/取消選擇所有復選框以及所選行的顏色更改
[英]Select/Deselect All Checkboxes along with colour changing of a selected row using jquery
當取消選中一個或多個項目時，knockout.js取消選擇/選中所有復選框
[英]knockoutjs deselect/select all checkboxes when one or more items deselected
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.