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

时间:2008-12-10 10:34:23

标签: jquery forms

当用户点击复选框时,我正在使用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');
});

再次感谢所有回复的人。

10 个答案:

答案 0 :(得分:52)

使用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'
});

答案 1 :(得分:18)

虽然使用Dreas Grech建议的change事件处理程序是合适的,但它在IE 6& 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(或删除属性)如果未选中该复选框。

答案 2 :(得分:8)

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

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

答案 3 :(得分:2)

这是MorningZ的答案(我发现它here)完全有道理:

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

这样:

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

这样:

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

因此,在您的change()功能中,您可以使用

$(this)[0].checked

答案 4 :(得分:1)

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

答案 5 :(得分:1)

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

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

答案 6 :(得分:0)

尝试:

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

答案 7 :(得分:0)

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

答案 8 :(得分:0)

尝试使用非jquery函数:

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

然后以你的形式:

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

答案 9 :(得分:0)

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

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