JQuery的切换事件与checkbox值混乱

我正在使用Jquery的切换事件做一些东西，当用户点击checkbox，如下所示：

$('input#myId').toggle( function(){ //do stuff }, function(){ //do other stuff } ); 

问题是，当我点击checkbox时，checkbox没有被勾选。 （所有我已经放入切换事件的东西工作正常。）

我已经尝试了以下内容：

 $('input#myId').attr('checked', 'checked'); 

和

 $(this).attr('checked', 'checked'); 

甚至简单

 return true; 

但没有任何工作。 谁能告诉我哪里出错了？

编辑 – 感谢所有谁回答。 除了检查属性的部分外，Dreas的回答几乎对我来说很有效。 这工作完美（虽然这有点哈克）

 $('input#myInput').change(function () { if(!$(this).hasClass("checked")) { //do stuff if the checkbox isn't checked $(this).addClass("checked"); return; } //do stuff if the checkbox isn't checked $(this).removeClass('checked'); }); 

再次感谢所有回复的人。

Answer 1

使用change事件而不是toggle事件，就像这样：

 $('input#myId').change(function () { if ($(this).attr("checked")) { //do the stuff that you would do when 'checked' return; } //Here do the stuff you want to do when 'unchecked' }); 

Answer 2

虽然使用Dreas Grechbuild议的change事件处理程序是适当的，但在IE 6和7中不能正常工作，直到焦点模糊为止（即直到您点击checkbox）。 正如QuirksMode所说，“这是一个严重的错误”。

您可能想要使用click事件处理程序，但这不适用于键盘导航。 你也需要注册一个keyup处理程序…

另请参阅这个相关的问题 。

我还没有find一个好的跨浏览器的解决scheme，支持鼠标点击和checkbox的键盘激活（并不会触发太多的事件）。

---

关于你的解决scheme来检查checkbox是否被选中，而不是添加你自己的checked类，你可以使用HTML的checked属性：

 $('input#myInput').change(function () { if ($(this).attr("checked")) { //do stuff if the checkbox is checked } else { //do stuff if the checkbox isn't checked } }); 

如果checkbox被选中，任何浏览器都会将input元素的checked属性设置为"checked"如果未选中该checkbox，则将其设置为null （或删除属性）。

Answer 3

为什么不使用$ .is（）？

 $('input#myId').change( function() { if ($(this).is(':checked')) { // do stuff here } else { // do other stuff here } }); 

Answer 4

这是MorningZ（我在这里find）的答案，这是完全合理的：

你缺less的部分是“checkbox”是一个jQuery对象，而不是checkbox的DOM对象

所以：

checkbox.checked肯定会出错，因为没有.checked属性的jQuery对象

所以：

checkbox[0].checked将工作，因为jQuery数组上的第一项是DOM对象本身。

所以在你的change()函数中你可以使用

 $(this)[0].checked 

Answer 5

 $('input#myId').toggle( function(e){ e.preventDefault(); //do stuff $(this).attr('checked', 'true'); }, function(e){ e.preventDefault(); //do other stuff $(this).attr('checked', 'false'); } ); 

Answer 6

这对我工作…………检查它

 $(":checkbox").click(function(){ if($(this).attr("id").split("chk_all")[1]) { var ty = "sel"+$(this).attr("id").split("chk_all")[1]+"[]"; if($(this).attr("checked")) { $('input[name="'+ty+'"]').attr("checked", "checked"); } else { $('input[name="'+ty+'"]').removeAttr("checked"); } } }) 

Answer 7

我做了类似的方法，但只是使用检查的属性，如

  //toggles checkbox on/off $("input:checkbox").change( function(){ if(!this.checked){ this.checked=true; } else{ this.checked=false; } } ); //end toggle 

Answer 8

  $("input[type=checkbox][checked=false]")// be shure to set to false on ready $("input#Checkbox1").change(function() { if ($(this).attr("checked")) { $("#chk1").html("you just selected me")//the lable } else {$("#chk1").html("you just un selected me") } }); 

Answer 9

尝试使用非jQuery的函数：

 function chkboxToggle() { if ($('input#chkbox').attr('checked')) // do something else // do something else } 

然后在你的forms：

 <input id="chkbox" type="checkbox" onclick="chkboxToggle()" /> 

Answer 10

尝试：

 $(":checkbox").click(function(){ if($(this).attr("checked")) { $('input[name="name[]"]').attr("checked", "checked"); } else { $('input[name="name[]"]').removeAttr("checked"); } })