Question

当用户点击复选框时，我正在使用Jquery的切换事件做一些事情，如下所示：

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

问题是当我点击复选框时没有勾选复选框。（我在切换事件中添加的所有内容都正常工作。）

我尝试了以下内容：

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

和

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

甚至只是

return true;

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

编辑 - 感谢所有回复的人。除了检查属性的部分外，Dreas的回答几乎对我有用。这很完美（虽然它有点hacky）

$('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 Grech建议的change事件处理程序是合适的，但它在IE 6＆amp; 7，在焦点模糊之前不会触发change事件（也就是说，直到您在复选框的区域外单击）。正如QuirksMode所说，“这是一个严重的错误”。

您可能希望使用click事件处理程序，但这不适用于键盘导航。您还需要注册一个keyup处理程序......

另见this related question。

我还没有找到一个好的跨浏览器解决方案，它支持鼠标点击和键盘激活复选框（并且不会触发太多事件）。

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

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

Answer 3

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

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

Answer 4

这是MorningZ的答案（我发现它here）完全有道理：

你缺少的部分是“复选框”是一个jQuery对象，而不是复选框DOM对象

这样：

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

这样：

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

尝试使用非jquery函数：

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

然后以你的形式：

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

Answer 9

尝试：

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

Answer 10

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

Jquery切换事件正在弄乱复选框值

10 个答案: