Correct way to do HTML5 checkbox

Question

I can't seem to find an example anywhere... what's the correct way of doing a HTML5 checkbox?

Answer 1

As far as I know and the docs state, nothing fundamental has changed. The basic markup is

<input name="your_name" value="your_value" type="checkbox"> 

What is new is some interesting properties.

• form - a reference to the form the control is associated with (nice!)
• autofocus - to be focused as soon as the document is loaded (nice!)
• required - require that it be checked (super nice! Although it isn't supported by Internet Explorer or Safari (yet).)

Answer 2

A more complete example - and avoiding the long stream of posts to How to check whether a checkbox is checked in jQuery?.

HTML

<input id="your_id" name="your_name" value="your_value" type="checkbox"> 

Optionally add the 'checked' attribute to default to checked on load.

<input id="your_id" name="your_name" value="your_value" type="checkbox" checked> 

JavaScript

$('#your_id').is(':checked')        // Returns a Boolean TRUE if checked 

e.g.

if ($('#your_id').is(':checked')) {     // Checkbox was checked }