Установите все флажки HTML

Question

У меня есть небольшой список флажков (см. Ниже), и я заметил, что могу использовать элемент ввода с type = "reset", и он снимет все флажки. Я знаю, что использование ввода было бы лучше, чем событие "onClick" ссылки, потому что я бы не полагался на JavaScript, но для этого примера у меня есть оба.

<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>

Каков наилучший способ реализации «Выбрать все»? Мне, вероятно, нужно написать функцию JavaScript, которая перебирает все «входные» элементы формы «myList» с помощью type = «checkbox» и устанавливает значение «0» или что-то в этом роде. Кроме того, каков правильный "кросс-браузерный" способ сделать это?

Я полагаю, что в HTML-форме нет способа сделать это, например, сброс? (Я не мог найти один.)

Answer 1

Сброс установит его в исходное состояние. Это означает, что если все ваши чекбоксы были установлены ранее, а затем изменены, нажатие кнопки сброса вернет их в это состояние.

Я бы предложил использовать jQuery для внесения изменений во многие элементы одновременно:

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

или с чистым JavaScript:

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

Answer 2

Да, вы бы использовали JS.

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

Answer 3

Также вы можете использовать функцию jquery .each

Answer 4

Правильно, HTML-пути нет. Вам придется использовать JavaScript или другой язык для его реализации.