Jquery toggle event is messing with checkbox value

Question

I\'m using Jquery\'s toggle event to do some stuff when a user clicks a checkbox, like this:

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


        

Answer 1

While using the change event handler suggested by Dreas Grech is appropriate, it doesn't work well in IE 6 & 7, which doesn't fire the change 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".

You might want to use the click event handler, but that won't work with keyboard navigation. You need to register a keyup handler too...

See also this related question.

I haven't yet found a good cross-browser solution that supports both mouse clicks and keyboard activation of the checkboxes (and doesn't fire too many events).

---

Regarding your solution for checking whether the checkbox is checked or not, instead of adding your own checked class, you may use HTML's checked attribute:

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

Any browser sets the checked attribute of an input element to the value "checked" if the checkbox is checked, and sets it to null (or deletes the attribute) if the checkbox is not checked.

Answer 2

Try:

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

Answer 3

Use the change event instead of the toggle event, like such:

$('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 4

Try using a non-jquery function:

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

then in your form:

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

Answer 5

why not using $.is() ?

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

Answer 6

I did a similar approach but simply using the checked attribute such as

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