how to properly format checkboxes. (best for jquery and crossbrowser)

I've seen lots of ways. And I remember I had some problems make it crossbrowser and retrieve checkbox state with jQuery.

from html checked to checked="true" and checked="1" and even checked=checked or checked="yes"

now... once for always. What is the best way for crossbr. check/uncheck and make jquery finally work getting/changing s开发者_开发知识库tate?

The checked attribute is a boolean attribute. It takes one value, and one value only: checked. This has not changed in HTML 5.

checked="checked"

If you are writing HTML (as opposed to XHTML) then you may provide just the value.

         checked

In JavaScript, the checked property can be assigned the values true or false. Any other value will be converted (e.g. "checked" is a string, so it converted according to the rules for converting strings and becomes true).

This is actually very simple and jQuery has just confused everyone.

• In HTML use either checked with no value or checked="checked".
• In XHTML (although it's very unlikely you should actually use it), use checked="checked".

In JavaScript, the checkedness of a checkbox is represented in every scriptable browser in the simplest possible way: a Boolean property. So, given the HTML

<input id="foo" type="checkbox" checked>

... you can get its checked state as follows:

var checkbox = document.getElementById("foo");
alert(checkbox.checked);

... and set it as follows:

checkbox.checked = false;

That's it.

jQuery provides the advantage of being able to handle multiple elements in one call. In jQuery 1.6 and later you do this with prop(). In earlier versions, use attr().

$("#foo").prop("checked", false);

Don't try and deal with the attribute directly: simply use the checked property and you'll never go wrong. This goes for pretty much all attributes when dealing with HTML.

I usually do this to check if it's checked and i never had problems:

$('#chk').click(function(){
    $('#show').toggle($(this).is(':checked'));
});

and this to check/uncheck it (jquery 1.6 or higher):

$('#button').click(function(){
    var chk = $('#chk')
    if(chk.is(':checked')){
        chk.prop('checked', false);
    }else{
        chk.prop('checked', true);
    }

});

To check or uncheck with jquery you should always use prop() since it's specifically targeted at properties.

in pure html the correct way i think is (of course omit checked if you don't want the checkbox to be checked):

 <input id='chk' type='checkbox' checked value='1'>

fiddle: http://jsfiddle.net/TTWVd/2/

As far as I'm concerned, so long as the checked attribute exists the box should be ticked, even if you proceed to set the value as false, checked="false", example.

However, I usually use checked="checked", and I've never had an issue with cross browser inconsistencies.

However, the MDN documentation suggests using boolean values as strings (it that makes sense). However with my above example, in FireFox 5 checked="false" still checked the element.

In JavaScript, the property is a boolean. In HTML, the property will be "checked" (this can also be shown in W3 standards -- note the (checked) (booleans in HTML will generally be their property names can't find the W3 ref. on that one, but it is true)).