如何使用 jQuery 通过按钮选中/取消选中所有复选框？

我正在尝试使用 jQuery 选中/取消选中所有复选框。现在，通过选中/取消选中父复选框，所有的子复选框都被选中/取消选中，同时父复选框的文本也被改为选中/取消选中。

现在我想用一个输入按钮替换父复选框，并将按钮上的文本也改为 checkall/uncheckall。这是密码，有人能修改一下密码吗？

    $( function() {
$( '.checkAll' ).live( 'change', function() {
$( '.cb-element' ).attr( 'checked', $( this ).is( ':checked' ) ? 'checked' : '' );
$( this ).next().text( $( this ).is( ':checked' ) ? 'Uncheck All' : 'Check All' );
});
$( '.cb-element' ).live( 'change', function() {
$( '.cb-element' ).length == $( '.cb-element:checked' ).length ? $( '.checkAll' ).attr( 'checked', 'checked' ).next().text( 'Uncheck All' ) : $( '.checkAll' ).attr( 'checked', '' ).next().text( 'Check All' );


});
});




<input type="checkbox" class="checkAll" /> <b>Check All</b>


<input type="checkbox" class="cb-element" /> Checkbox  1
<input type="checkbox" class="cb-element" /> Checkbox  2
<input type="checkbox" class="cb-element" /> Checkbox  3
460819 次浏览
小开

试试这个

$(".checkAll").click(function() {
if("checkall" === $(this).val()) {
$(".cb-element").attr('checked', true);
$(this).val("uncheckall"); //change button text
}
else if("uncheckall" === $(this).val()) {
$(".cb-element").attr('checked', false);
$(this).val("checkall"); //change button text
}
});
小开
最佳答案

试试这个:

$(document).ready(function(){
$('.check:button').toggle(function(){
$('input:checkbox').attr('checked','checked');
$(this).val('uncheck all');
},function(){
$('input:checkbox').removeAttr('checked');
$(this).val('check all');
})
})

演示

小开

Html

<input type="checkbox" name="select_all" id="select_all" class="checkAll" />

Javascript

    $('.checkAll').click(function(){
if($(this).attr('checked')){
$('input:checkbox').attr('checked',true);
}
else{
$('input:checkbox').attr('checked',false);
}
});
小开

试试这个:

超文本标示语言

<input type="checkbox" name="all" id="checkall" />

JavaScript

$('#checkall:checkbox').change(function () {
if($(this).attr("checked")) $('input:checkbox').attr('checked','checked');
else $('input:checkbox').removeAttr('checked');
});​

演示

小开

无耻的自我推销: 有一个 jQuery 插件。

HTML:

<form action="#" id="myform">
<div><input type="checkbox" id="checkall"> <label for="checkall"> Check all</label></div>
<fieldset id="slaves">
<div><label><input type="checkbox"> Checkbox</label></div>
<div><label><input type="checkbox"> Checkbox</label></div>
<div><label><input type="checkbox"> Checkbox</label></div>
<div><label><input type="checkbox"> Checkbox</label></div>
<div><label><input type="checkbox"> Checkbox</label></div>
</fieldset>
</form>​

约翰逊:

$('#checkall').checkAll('#slaves input:checkbox', {
reportTo: function () {
var prefix = this.prop('checked') ? 'un' : '';
this.next().text(prefix + 'check all');
}
});​

你就完了。

Http://jsfiddle.net/mattball/nrm2p

小开 
$(document).ready( function() {
// Check All
$('.checkall').click(function () {
$(":checkbox").attr("checked", true);
});
// Uncheck All
$('.uncheckall').click(function () {
$(":checkbox").attr("checked", false);
});
});
小开

使用按钮切换复选框的解决方案，与 jQuery 1.9 + 兼容，其中 Togle-event 不再可用:

$('.check:button').click(function(){
var checked = !$(this).data('checked');
$('input:checkbox').prop('checked', checked);
$(this).val(checked ? 'uncheck all' : 'check all' )
$(this).data('checked', checked);
});

演示

小开

我知道这个问题很老了，但是，我注意到大多数人都在使用复选框。接受的答案使用一个按钮，但不能与多个按钮(例如。第一页最上面的那个)。所以这里有一个兼顾两者的修改。

超文本标示语言

<a href="#" class="check-box-machine my-button-style">Check All</a>

JQuery

var ischecked = false;
$(".check-box-machine").click(function(e) {
e.preventDefault();
if (ischecked == false) {
$("input:checkbox").attr("checked","checked");
$(".check-box-machine").html("Uncheck All");
ischecked = true;
} else {
$("input:checkbox").removeAttr("checked");
$(".check-box-machine").html("Check All");
ischecked = false;
}
});

这将允许您在更改文本和复选框值时拥有尽可能多的按钮。我包括一个 e.preventDefault()调用，因为这将停止页面从跳转到顶部由于 href="#"的一部分。

小开

试试这个,

<input type="checkbox" class="checkAll" onclick="$('input[type=checkbox][class=cb-element]').attr('checked',this.checked)">
小开

这是我找到的最短的方法(需要 jQuery1.6 +)

HTML:

<input type="checkbox" id="checkAll"/>

约翰逊:

$("#checkAll").change(function () {
$("input:checkbox").prop('checked', $(this).prop("checked"));
});

我在吸毒。道具。Attr 不适用于 jQuery 1.6 + 中的复选框，除非您已经显式地向 input 标记添加了选中的属性。

例子-

$("#checkAll").change(function () {
$("input:checkbox").prop('checked', $(this).prop("checked"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="#">
<p><label><input type="checkbox" id="checkAll"/> Check all</label></p>
    

<fieldset>
<legend>Loads of checkboxes</legend>
<p><label><input type="checkbox" /> Option 1</label></p>
<p><label><input type="checkbox" /> Option 2</label></p>
<p><label><input type="checkbox" /> Option 3</label></p>
<p><label><input type="checkbox" /> Option 4</label></p>
</fieldset>
</form>

小开

使用 uncheck/Check 控制器检查所有项目是否被检查

约翰逊:

E = 复选框 id t = 复选框(项)类 n = 复选框复选所有类

function checkAll(e,t,n){jQuery("#"+e).click(function(e){if(this.checked){jQuery("."+t).each(function(){this.checked=true;jQuery("."+n).each(function(){this.checked=true})})}else{jQuery("."+t).each(function(){this.checked=false;jQuery("."+n).each(function(){this.checked=false})})}});jQuery("."+t).click(function(e){var r=jQuery("."+t).length;var i=0;var s=0;jQuery("."+t).each(function(){if(this.checked==true){i++}if(this.checked==false){s++}});if(r==i){jQuery("."+n).each(function(){this.checked=true})}if(i<r){jQuery("."+n).each(function(){this.checked=false})}})}

HTML:

选中 ALL 控件类: chkall _ ctrl

<input type="checkbox"name="chkall" id="chkall_up" class="chkall_ctrl"/>
<br/>
1.<input type="checkbox" value="1" class="chkall" name="chk[]" id="chk1"/><br/>
2.<input type="checkbox" value="2" class="chkall" name="chk[]" id="chk2"/><br/>
3.<input type="checkbox" value="3" class="chkall" name="chk[]" id="chk3"/><br/>
<br/>
<input type="checkbox"name="chkall" id="chkall_down" class="chkall_ctrl"/>


<script>
jQuery(document).ready(function($)
{
checkAll('chkall_up','chkall','chkall_ctrl');
checkAll('chkall_down','chkall','chkall_ctrl');
});
</script>
小开

试试这个:

$('.checkAll').on('click', function(e) {
$('.cb-element').prop('checked', $(e.target).prop('checked'));
});

e是执行 click时生成的事件，而 e.target是单击的元素(.checkAll) , 所以您只需将类 .cb-element的元素的属性 checked放置在类元素的属性 checked中即可 和同学们一起检查。

附言: 请原谅我英语不好！

小开 
$(function () {
$('input#check_all').change(function () {
$("input[name='input_ids[]']").prop('checked', $(this).prop("checked"));
});
});
小开

您可以使用 this.checked来验证复选框的当前状态,

$('.checkAll').change(function(){
var state = this.checked; //checked ? - true else false


state ? $(':checkbox').prop('checked',true) : $(':checkbox').prop('checked',false);


//change text
state ? $(this).next('b').text('Uncheck All') : $(this).next('b').text('Check All')
});


$('.checkAll').change(function(){
var state = this.checked;
state? $(':checkbox').prop('checked',true):$(':checkbox').prop('checked',false);
state? $(this).next('b').text('Uncheck All') :$(this).next('b').text('Check All')
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="checkAll" /> <b>Check All</b>


<input type="checkbox" class="cb-element" /> Checkbox  1
<input type="checkbox" class="cb-element" /> Checkbox  2
<input type="checkbox" class="cb-element" /> Checkbox  3

小开

这里有一个链接，用于选中和取消选中父复选框，所有的子复选框都被选中和取消选中。

使用 Jquery 和 Demo 一起取消选中所有复选框

$(function () {
$("#select-all").on("click", function () {
var all = $(this);
$('input:checkbox').each(function () {
$(this).prop("checked", all.prop("checked"));
});
});
});
小开

这是最佳解决方案 检查小提琴

$("#checkAll").change(function () {
$("input:checkbox.cb-element").prop('checked', $(this).prop("checked"));
});
$(".cb-element").change(function () {
_tot = $(".cb-element").length
_tot_checked = $(".cb-element:checked").length;


if(_tot != _tot_checked){
$("#checkAll").prop('checked',false);
}
});

<input type="checkbox" id="checkAll"/> ALL


<br />


<input type="checkbox" class="cb-element" /> Checkbox  1
<input type="checkbox" class="cb-element" /> Checkbox  2
<input type="checkbox" class="cb-element" /> Checkbox  3
小开 
<script type="text/javascript">
function myFunction(checked,total_boxes){
for ( i=0 ; i < total_boxes ; i++ ){
if (checked){
document.forms[0].checkBox[i].checked=true;
}else{
document.forms[0].checkBox[i].checked=false;
}
}
}
</script>
<body>
<FORM>
<input type="checkbox" name="checkBox" >one<br>
<input type="checkbox" name="checkBox" >two<br>
<input type="checkbox" name="checkBox" >three<br>
<input type="checkbox" name="checkBox" >four<br>
<input type="checkbox" name="checkBox" >five<br>
<input type="checkbox" name="checkBox" >six<br>
<input type="checkbox" name="checkBox" >seven<br>
<input type="checkbox" name="checkBox" >eight<br>
<input type="checkbox" name="checkBox" >nine<br>
<input type="checkbox" name="checkBox" >ten<br>  s
<input type=button name="CheckAll" value="Select_All" onClick="myFunction(true,10)">
<input type=button name="UnCheckAll" value="UnCheck All Boxes" onClick="myFunction(false,10)">
</FORM>
</body>
小开

将其添加到代码块中，甚至单击按钮

$('input:checkbox').attr('checked',false);
小开

尝试以下代码选中/取消选中所有复选框

jQuery(document).ready(function() {
$("#check_uncheck").change(function() {
if ($("#check_uncheck:checked").length) {
$(".checkboxes input:checkbox").prop("checked", true);
} else {
$(".checkboxes input:checkbox").prop("checked", false);
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="checkbox" name="check_uncheck" id="check_uncheck" /> Check All/Uncheck All
<br/>
<br/>
<div class="checkboxes">
<input type="checkbox" name="check" id="check" /> Check Box 1
<br/>
<input type="checkbox" name="check" id="check" /> Check Box 2
<br/>
<input type="checkbox" name="check" id="check" /> Check Box 3
<br/>
<input type="checkbox" name="check" id="check" /> Check Box 4
</div>

试试这个 示范连结

还有另一个简短的方法来做到这一点，检查下面的例子。在这个例子中，选中/取消选中所有选中框是否被选中，如果选中了，那么所有选中框都将被选中，如果没有选中，那么所有选中框都将被取消选中

$("#check_uncheck").change(function() {
$(".checkboxes input:checkbox").prop("checked",$(this).is(':checked'));
})
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="checkbox" name="check_uncheck" id="check_uncheck" /> Check All/Uncheck All
<br/>
<br/>
<div class="checkboxes">
<input type="checkbox" name="check" id="check" /> Check Box 1
<br/>
<input type="checkbox" name="check" id="check" /> Check Box 2
<br/>
<input type="checkbox" name="check" id="check" /> Check Box 3
<br/>
<input type="checkbox" name="check" id="check" /> Check Box 4
</div>

小开

下面的代码将工作，如果用户选择所有复选框，然后选中所有-复选框将被选中，如果用户取消选中任何一个复选框，然后选中所有-复选框将被取消选中。

$("#checkall").change(function () {
$("input:checkbox").prop('checked', $(this).prop("checked"));
});


$(".cb-element").change(function () {
if($(".cb-element").length==$(".cb-element:checked").length)
$("#checkall").prop('checked', true);
else
$("#checkall").prop('checked', false);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" name="all" id="checkall" />Check All</br>


<input type="checkbox" class="cb-element" /> Checkbox  1</br>
<input type="checkbox" class="cb-element" /> Checkbox  2</br>
<input type="checkbox" class="cb-element" /> Checkbox  3

小开

同意 Richard Garside 的简短回答，但是在 $(this).prop("checked")中不使用 prop()，您可以使用 复选框的原生 JS checked属性，例如,

$("#checkAll").change(function () {
$("input:checkbox").prop('checked', this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="#">
<p><label><input type="checkbox" id="checkAll"/> Check all</label></p>
    

<fieldset>
<legend>Loads of checkboxes</legend>
<p><label><input type="checkbox" /> Option 1</label></p>
<p><label><input type="checkbox" /> Option 2</label></p>
<p><label><input type="checkbox" /> Option 3</label></p>
<p><label><input type="checkbox" /> Option 4</label></p>
</fieldset>
</form>

小开

你可以试试这个

    $('.checkAll').on('click',function(){
$('.checkboxes').prop('checked',$(this).prop("checked"));
});`

类 .checkAll是控制批量操作的复选框

小开

使用 jQuery 选中/取消选中 All with Intermediate 属性

使用 GetSelectedItems ()方法获取数组中的检查项

来源 复选框列表使用不确定主检查选择/取消选择所有

enter image description here

超文本标示语言

<div class="container">
<div class="card">
<div class="card-header">
<ul class="list-group list-group-flush">
<li class="list-group-item">
<input
class="form-check-input"
type="checkbox"
value="selectAll"
id="masterCheck"
/>
<label class="form-check-label" for="masterCheck">
Select / Unselect All
</label>
</li>
</ul>
</div>
<div class="card-body">
<ul class="list-group list-group-flush" id="list-wrapper">
<li class="list-group-item">
<input
class="form-check-input"
type="checkbox"
value="item1"
id="item1"
/>
<label class="form-check-label" for="item1">
Item 1
</label>
</li>
<li class="list-group-item">
<input
class="form-check-input"
type="checkbox"
value="item2"
id="item2"
/>
<label class="form-check-label" for="item2">
Item 2
</label>
</li>
<li class="list-group-item">
<input
class="form-check-input"
type="checkbox"
value="item3"
id="item3"
/>
<label class="form-check-label" for="item3">
Item 3
</label>
</li>
<li class="list-group-item">
<input
class="form-check-input"
type="checkbox"
value="item4"
id="item4"
/>
<label class="form-check-label" for="item4">
Item 4
</label>
</li>
<li class="list-group-item">
<input
class="form-check-input"
type="checkbox"
value="item5"
id="item5"
/>
<label class="form-check-label" for="item5">
Item 5
</label>
</li>
<li class="list-group-item" id="selected-values"></li>
</ul>
</div>
</div>
</div>

JQuery

  $(function() {
// ID selector on Master Checkbox
var masterCheck = $("#masterCheck");
// ID selector on Items Container
var listCheckItems = $("#list-wrapper :checkbox");


// Click Event on Master Check
masterCheck.on("click", function() {
var isMasterChecked = $(this).is(":checked");
listCheckItems.prop("checked", isMasterChecked);
getSelectedItems();
});


// Change Event on each item checkbox
listCheckItems.on("change", function() {
// Total Checkboxes in list
var totalItems = listCheckItems.length;
// Total Checked Checkboxes in list
var checkedItems = listCheckItems.filter(":checked").length;


//If all are checked
if (totalItems == checkedItems) {
masterCheck.prop("indeterminate", false);
masterCheck.prop("checked", true);
}
// Not all but only some are checked
else if (checkedItems > 0 && checkedItems < totalItems) {
masterCheck.prop("indeterminate", true);
}
//If none is checked
else {
masterCheck.prop("indeterminate", false);
masterCheck.prop("checked", false);
}
getSelectedItems();
});


function getSelectedItems() {
var getCheckedValues = [];
getCheckedValues = [];
listCheckItems.filter(":checked").each(function() {
getCheckedValues.push($(this).val());
});
$("#selected-values").html(JSON.stringify(getCheckedValues));
}
});
小开 
 $(document).on('change', '.check-all', function () {
if($(this).prop('checked')) {
$('.check-box').prop('checked', true)
}else {
$('.check-box').prop('checked', false);
}
小开

如果您想取消选中页面上所有的复选框，最简单的方法是这样的:

$('[type=checkbox]').prop("checked", false);


提交答案