表单-jQuery切换事件使复选框值混乱

当用户单击复选框时,我正在使用Jquery的toggle事件执行一些操作,例如:

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

问题是当我单击复选框时,该复选框没有被打勾。 (我在切换事件中添加的所有内容均正常运行。)

我尝试了以下方法:

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

再次感谢所有答复。

John McCollum asked 2020-08-11T01:45:36Z
10个解决方案
52 votes

使用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'
});
Andreas Grech answered 2020-08-11T01:45:42Z
18 votes

While using the checked event handler suggested by Dreas Grech is appropriate, it doesn't work well in IE 6 & 7, which doesn't fire the input event until the focus is blurred (that is, until you click outside the area of the checkbox). As QuirksMode say, "it's a serious bug".

您可能要使用checked事件处理程序,但这不适用于键盘导航。 您还需要注册一个input处理程序...

另请参阅此相关问题。

我还没有找到一个很好的跨浏览器解决方案,该解决方案既支持鼠标单击又支持复选框的键盘激活(并且不会触发太多事件)。


关于用于检查复选框是否已选中的解决方案,您可以使用HTML的input属性来代替添加自己的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
    }
});

如果选中该复选框,则任何浏览器都将input元素的checked属性设置为值"checked",如果未选中该复选框,则将其设置为null(或删除该属性)。

dubek answered 2020-08-11T01:47:21Z
8 votes

为什么不使用$ .is()呢?

$('input#myId').change(
    function() {
        if ($(this).is(':checked')) {
            // do stuff here 
        } else {
            // do other stuff here
        }
});
solsTiCe answered 2020-08-11T01:47:41Z
2 votes

这是MorningZ(我在这里找到的)的答案,这完全有道理:

您缺少的部分是“复选框”是jQuery对象,而不是复选框DOM对象

所以:

change()肯定会出错,因为没有jQuery的.checked属性目的

所以:

change()将起作用,因为jQuery数组上的第一项是DOM对象本身。

因此,您可以在change()函数中使用

$(this)[0].checked
Richard answered 2020-08-11T01:48:28Z
1 votes
$('input#myId').toggle(
  function(e){
    e.preventDefault();
    //do stuff      
    $(this).attr('checked', 'true');
  },
  function(e){
    e.preventDefault();
    //do other stuff        
    $(this).attr('checked', 'false');
  }
);
adam answered 2020-08-11T01:48:43Z
1 votes

这对我有用.........检查

$(":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");
   }
 }
})
Harikrishnan answered 2020-08-11T01:49:03Z
0 votes

我做过类似的方法,只是使用了checked属性,例如

 //toggles checkbox on/off
    $("input:checkbox").change(
        function(){
           if(!this.checked){
             this.checked=true;
           }
           else{
             this.checked=false;
           }
         }
       );
 //end toggle
Andreas Grech answered 2020-08-11T01:49:23Z
0 votes
    $("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") }    
    });
philljohn answered 2020-08-11T01:49:38Z
0 votes

尝试使用非jquery函数:

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

然后以您的形式:

<input id="chkbox" type="checkbox" onclick="chkboxToggle()" />
sth answered 2020-08-11T01:50:02Z
0 votes

尝试:

$(":checkbox").click(function(){
  if($(this).attr("checked"))
   {
    $('input[name="name[]"]').attr("checked", "checked");
   }
  else
   {
    $('input[name="name[]"]').removeAttr("checked");
   }
})
Harikrishnan answered 2020-08-11T01:50:22Z
translate from https://stackoverflow.com:/questions/355638/jquery-toggle-event-is-messing-with-checkbox-value