打开/关闭复选框

我有以下几点:

$(document).ready(function()
{
$("#select-all-teammembers").click(function() {
$("input[name=recipients\\[\\]]").attr('checked', true);
});
});

我想在点击id="select-all-teammembers"时在选中和未选中之间切换。想法吗?那不是几十行代码吗?

598743 次浏览
小开
最佳答案

你可以这样写:

$(document).ready(function() {
$("#select-all-teammembers").click(function() {
var checkBoxes = $("input[name=recipients\\[\\]]");
checkBoxes.prop("checked", !checkBoxes.prop("checked"));
});
});

在jQuery 1.6之前，当我们只有attr ()而没有支持()时，我们常常这样写:

checkBoxes.attr("checked", !checkBoxes.attr("checked"));

但是当应用于“布尔”HTML属性时，prop()比attr()具有更好的语义，所以在这种情况下通常是首选。

小开

这是你想要的另一种方式。

$(document).ready(function(){
$('#checkp').toggle(
function () {
$('.check').attr('Checked','Checked');
},
function () {
$('.check').removeAttr('Checked');
}
);
});
小开 
//this toggles the checkbox, and fires its event if it has


$('input[type=checkbox]').trigger('click');
//or
$('input[type=checkbox]').click();
小开

假设它是一个必须切换复选框的图像，这对我来说是可行的

<img src="something.gif" onclick="$('#checkboxid').prop('checked', !($('#checkboxid').is(':checked')));">
<input type="checkbox" id="checkboxid">
小开

我知道这是老问题，但这个问题有点模棱两可，因为切换可能意味着每个复选框应该切换其状态，无论它是什么。如果有3个选中，2个未选中，那么切换将使前3个未选中，最后2个选中。

为此，这里的解决方案都不起作用，因为它们使所有复选框具有相同的状态，而不是切换每个复选框的状态。对许多复选框执行$(':checkbox').prop('checked')将返回所有.checked二进制属性之间的逻辑与，即如果其中一个未选中，则返回值为false。

如果你想实际切换每个复选框的状态，而不是使它们都相等，则需要使用.each()。

   $(':checkbox').each(function () { this.checked = !this.checked; });

注意，在处理程序中不需要$(this)，因为.checked属性存在于所有浏览器中。

小开
最基本的例子是: 
// get DOM elements
var checkbox = document.querySelector('input'),
button = document.querySelector('button');


// bind "cilck" event on the button
button.addEventListener('click', toggleCheckbox);


// when clicking the button, toggle the checkbox
function toggleCheckbox(){
checkbox.checked = !checkbox.checked;
};
<input type="checkbox">
<button>Toggle checkbox</button>

小开

我认为触发点击更简单:

$("#select-all-teammembers").click(function() {
$("input[name=recipients\\[\\]]").trigger('click');
});
小开

如果你想单独切换每个框(或者只有一个框也可以):

我建议使用.each()，因为如果你想要发生不同的事情，它很容易修改，而且仍然相对简短且易于阅读。

例如:

// toggle all checkboxes, not all at once but toggle each one for its own checked state:
$('input[type="checkbox"]').each(function(){ this.checked = ! this.checked });


// check al even boxes, uncheck all odd boxes:
$('input[type="checkbox"]').each(function(i,cb){ cb.checked = (i%2 == 0); });


// set all to checked = x and only trigger change if it actually changed:
x = true;
$('input[type="checkbox"]').each(function(){
if(this.checked != x){ this.checked = x; $(this).change();}
});

在旁注… 不知道为什么每个人都使用.attr()或.prop()来(un)检查东西

据我所知，是元素。Checked在所有浏览器中都是一样的?

小开

有一个更简单的方法

首先给你的复选框一个类示例'id_chk'

然后在复选框内，将控制'id_chk'复选框的状态put:

<input type='checkbox' onchange='js:jQuery(".id_chk").prop("checked", jQuery(this).prop("checked"))' />

就这些，希望这能有所帮助

小开

使用这个插件:

$.fn.toggleCheck  =function() {
if(this.tagName === 'INPUT') {
$(this).prop('checked', !($(this).is(':checked')));
}


}

然后

$('#myCheckBox').toggleCheck();
小开 
jQuery("#checker").click(function(){
jQuery("#mydiv :checkbox").each(function(){
this.checked = true;
});
});
jQuery("#dechecker").click(function(){
jQuery("#mydiv :checkbox").each(function(){
this.checked = false;
});
});
jQuery("#checktoggler").click(function(){
jQuery("#mydiv :checkbox").each(function(){
this.checked = !this.checked;
});
});

；）

小开

Check-all复选框在某些条件下应该更新本身。尝试单击“# select-all-teammembers”，然后取消一些项目，并再次单击全选。你可以看到不一致。为了防止它，可以使用以下技巧:

  var checkBoxes = $('input[name=recipients\\[\\]]');
$('#select-all-teammembers').click(function() {
checkBoxes.prop("checked", !checkBoxes.prop("checked"));
$(this).prop("checked", checkBoxes.is(':checked'));
});

顺便说一下，所有DOM-object复选框都应该像上面描述的那样缓存。

小开

在我看来，建议正常变种的人是GigolNet Gigolashvili，但我想建议更漂亮的变种。检查它

$(document).on('click', '.fieldWrapper > label', function(event) {
event.preventDefault()
var n = $( event.target ).parent().find('input:checked').length
var m = $( event.target ).parent().find('input').length
x = n==m? false:true
$( event.target ).parent().find('input').each(function (ind, el) {
// $(el).attr('checked', 'checked');
this.checked = x
})
})
小开

分别设置'checked'或null而不是true或false将完成这项工作。

// checkbox selection
var $chk=$(':checkbox');
$chk.prop('checked',$chk.is(':checked') ? null:'checked');
小开

从jQuery 1.6开始，你可以使用.prop(function)来切换每个找到元素的检查状态:

$("input[name=recipients\\[\\]]").prop('checked', function(_, checked) {
return !checked;
});
小开

你也可以这样写

$(function() {
$("#checkbox-toggle").click(function() {
$('input[type=checkbox][name=checkbox_id\\[\\]]').click();
});
});

当用户单击id为“#checkbox-toggle”的按钮时，只需要调用复选框的单击事件。

小开

一个更好的方法和用户体验

$('.checkall').on('click', function() {
var $checks  = $('checks');
var $ckall = $(this);


$.each($checks, function(){
$(this).prop("checked", $ckall.prop('checked'));
});
});


$('checks').on('click', function(e){
$('.checkall').prop('checked', false);
});
小开 
<table class="table table-datatable table-bordered table-condensed table-striped table-hover table-responsive">
<thead>
<tr>
<th class="col-xs-1"><a class="select_all btn btn-xs btn-info"> Select All </a></th>
<th class="col-xs-2">#ID</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="order333"/></td>
<td>\{\{ order.id }}</td>
</tr>
<tr>
<td><input type="checkbox" name="order334"/></td>
<td>\{\{ order.id }}</td>
</tr>
</tbody>
</table>

试一试:

$(".table-datatable .select_all").on('click', function () {
$("input[name^='order']").prop('checked', function (i, val) {
return !val;
});
});
小开

这个很适合我。

   $("#checkall").click(function() {
var fruits = $("input[name=fruits\\[\\]]");
fruits.prop("checked", $(this).prop("checked"));
});
小开
这段代码将在单击web模板中使用的任何拨动开关动画器时拨动复选框。取代”。Onoffswitch-label”在你的代码中可用。

. "checkboxID"是这里切换的复选框 
$('.onoffswitch-label').click(function () {
if ($('#checkboxID').prop('checked'))
{
$('#checkboxID').prop('checked', false);
}
else
{
$('#checkboxID').prop('checked', true);
}
});
小开

这里是一个jQuery的方法来切换复选框，而不必选择一个复选框html5 &标签:

 <div class="checkbox-list margin-auto">
<label class="">Compare to Last Year</label><br>
<label class="normal" for="01">
<input id="01" type="checkbox" name="VIEW" value="01"> Retail units
</label>
<label class="normal" for="02">
<input id="02" type="checkbox" name="VIEW" value="02">  Retail Dollars
</label>
<label class="normal" for="03">
<input id="03" type="checkbox" name="VIEW" value="03">  GP Dollars
</label>
<label class="normal" for="04">
<input id="04" type="checkbox" name="VIEW" value="04">  GP Percent
</label>
</div>


$("input[name='VIEW']:checkbox").change(function() {
if($(this).is(':checked')) {
$("input[name='VIEW']:checkbox").prop("checked", false);
$("input[name='VIEW']:checkbox").parent('.normal').removeClass("checked");
$(this).prop("checked", true);
$(this).parent('.normal').addClass('checked');
}
else{
$("input[name='VIEW']").prop("checked", false);
$("input[name='VIEW']").parent('.normal').removeClass('checked');
}
});

http://www.bootply.com/A4h6kAPshx

小开

这是我能想到的最好的办法。

$('#selectAll').change(function () {
$('.reportCheckbox').prop('checked', this.checked);
});

或

$checkBoxes = $(".checkBoxes");
$("#checkAll").change(function (e) {
$checkBoxes.prop("checked", this.checked);
});

或

<input onchange="toggleAll(this)">
function toggleAll(sender) {
$(".checkBoxes").prop("checked", sender.checked);
}
小开

你可以简单地使用它

$("#chkAll").on("click",function(){
$("input[name=checkBoxName]").prop("checked",$(this).prop("checked"));
});
小开

你也可以通过以下方法toggle-checkboxes-on-off。当前使用bootstrap切换复选框。

<link href='https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css' rel='stylesheet'>
<script src='https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js'></script>


<input type='checkbox' id='toggleScheduler' name='toggleScheduler' data-toggle='toggle'  data-on='Enabled'  data-off='Disabled'


$("#toggleScheduler").bootstrapToggle('on'); // enable toggle checkbox
$("#toggleScheduler").bootstrapToggle('off'); // disable toggle checkbox

提交答案