I have a small list of checkboxes (see below), and I noticed I can use an input element with type="reset" and it will uncheck all the boxes. I know using the input would be better than an "onClick" event of the link, because I wouldn't be relying on JavaScript, but for this example I have both.

<a onclick="javascript:document.myList.reset();" href="#">select none</a>  |
<a href="#">select all</a>
<form name="myList">
  <input type="checkbox" name="item1"/>Item 1<br/>
  <input type="checkbox" name="item2"/>Item 2<br/>
  <input type="reset" name="none"/>
  <input type="submit" name="submit"/>
</form>

What is the best way of implementing the "Select all"? I would probably need to write a JavaScript function that loops through all "input" elements of the form "myList" with type="checkbox" and set the value to "0" or something. Also, what is the correct "cross-browser" way of doing this?

I assume there is no HTML form way of doing this like the reset? (I couldn't find one.)

I have a small list of checkboxes (see below), and I noticed I can use an input element with type="reset" and it will uncheck all the boxes. I know using the input would be better than an "onClick" event of the link, because I wouldn't be relying on JavaScript, but for this example I have both.

<a onclick="javascript:document.myList.reset();" href="#">select none</a>  |
<a href="#">select all</a>
<form name="myList">
  <input type="checkbox" name="item1"/>Item 1<br/>
  <input type="checkbox" name="item2"/>Item 2<br/>
  <input type="reset" name="none"/>
  <input type="submit" name="submit"/>
</form>

What is the best way of implementing the "Select all"? I would probably need to write a JavaScript function that loops through all "input" elements of the form "myList" with type="checkbox" and set the value to "0" or something. Also, what is the correct "cross-browser" way of doing this?

I assume there is no HTML form way of doing this like the reset? (I couldn't find one.)

• javascript
• html
• forms

Share Follow edited Feb 4, 2010 at 19:09 Peter Mortensen 31.6k2222 gold badges110110 silver badges133133 bronze badges asked Feb 14, 2009 at 0:34 occhisoocchiso 3,17144 gold badges2323 silver badges1616 bronze badges 1

• Just to clarify, HTML reset will change everything back to the way it was. If your checkbox was checked while rendered, the reset button will make it checked. – Chetan S Commented Feb 14, 2009 at 0:41

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 10

Reset will set it to its initial state. That means that if all of your checkboxes were set to checked before and then changed pressing reset would take them back to that state.

I would suggest using jQuery for for making changes to many elements at a time:

$("form[name='myList'] :checkbox").attr("checked", true);

or with pure JavaScript:

for(var i in document.myList.childNodes)
    if(document.myList.childNodes[i].type == "checkbox")
        document.myList.childNodes[i].checked = true;

Yeah, you'd use JS.

for(var ix = 0; ix < document.myList.elements.count; ix++)
    if(document.myList.elements[ix].type == 'checkbox')
        document.myList.elements[ix].checked = true;

Correct, there is no HTML way. You'd have to use JavaScript or another language to implement it.

Also you can use jquery function .each