打开/closurescheckbox

我有以下几点：

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

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

Answer 1

你可以写：

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

在jQuery 1.6之前，当我们只有attr（）而不是prop（）时 ，我们用来写：

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

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

Answer 2

 //this toggles the checkbox, and fires its event if it has $('input[type=checkbox]').trigger('click'); //or $('input[type=checkbox]').click(); 

Answer 3

我知道这是旧的，但问题是有点模糊， 切换可能意味着每个checkbox应该切换其状态，无论是。 如果你有3个选中，2个未选中，那么切换会使前3个未选中，最后2个选中。

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

你需要使用.each()如果你想实际切换每个checkbox的状态，而不是使他们都平等，例如

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

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

Answer 4

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

 $(document).ready(function(){ $('#checkp').toggle( function () { $('.check').attr('Checked','Checked'); }, function () { $('.check').removeAttr('Checked'); } ); }); 

Answer 5

我认为触发点击更简单：

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

Answer 6

使用这个插件：

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

然后

 $('#myCheckBox').toggleCheck(); 

Answer 7

由于jQuery 1.6你可以使用.prop(function)切换每个find的元素的选中状态：

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

Answer 8

假设这是一个图像，必须切换checkbox，这对我的作品

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

Answer 9

全选checkbox应在特定条件下自行更新。 尝试点击“＃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')); }); 

顺便说一句，所有的checkboxDOM对象应该如上所述进行caching。

Answer 10

我能想到的最好的方式。

 $('#selectAll').change(function () { var checked = (this.checked) ? true : false; $('.reportCheckbox').prop('checked', checked); }); 

要么

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

Answer 11

最基本的例子是：

 // 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> 

Answer 12

只要你可以使用这个

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

Answer 13

如果你想单独切换每个盒子（或者只是一个盒子也可以）：

我build议使用.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）检查的东西。

据我所知，element.checked在所有的浏览器中一直都是一样的。

Answer 14

 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; }); }); 

;）

Answer 15

在我的猜测中，谁build议正常的变种是GigolNet Gigolashvili，但我想build议更美丽的变种。 核实

 $(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 }) }) 

Answer 16

设置'选中'或空分别代替真或假将做这项工作。

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

Answer 17

你也可以这样写

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

当用户点击ID为“＃checkbox-toggle”的button时，只需要调用checkbox的点击事件即可。

Answer 18

更好的方法和UX

 $('.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); }); 

Answer 19

 <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; }); }); 

Answer 20

这个对我来说很好。

  $("#checkall").click(function() { var fruits = $("input[name=fruits\\[\\]]"); fruits.prop("checked", $(this).prop("checked")); }); 

Answer 21

此代码将在点击网页模板中使用的任何切换开关animation工具时切换checkbox。 replace代码中的“.onoffswitch-label”。 “checkboxID”是在此处切换的checkbox。

 $('.onoffswitch-label').click(function () { if ($('#checkboxID').prop('checked')) { $('#checkboxID').prop('checked', false); } else { $('#checkboxID').prop('checked', true); } }); 

Answer 22

这里是一个jQuery的方式来切换checkbox，而不必selectcheckbox与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

Answer 23

那么有一个更简单的方法

首先给你的checkbox一个类的例子'id_chk'

然后里面的checkbox，这将控制'id_chk'checkbox状态把：

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

这就是所有，希望这有助于