значение флажка не отображается

Question

У меня есть следующий код

   <tr>
<td align=left colspan=6><table border="0">
  <tr>
      <td><font class="body_text"> windows: <input name="pro1" id="products0" type="checkbox" value="5" test="5"></td>

        <td><font class="body_text"> cpu: <input name="pro2" id="products1" type="checkbox" value="2" test="2"></td>

        <td><font class="body_text"> keyboard: <input name="pro3" id="products2" type="checkbox" value="3" test="3"></td>

        <td><font class="body_text"> mouse: <input name="pro4" id="products3" type="checkbox" value="4" test="4"></td>


  </tr>

и я пытаюсь получить значение первого флажка в DOM

if(document.form.products[0].checked == true) alert(document.form.products[0].value);

это дает мне предупреждение, но значение не определено.

спасибо

Answer 1

Если предположить, что элементы управления имеют форму с идентификатором form (что не является хорошим именем), то проблема в том, что у вас нет элементов управления с именем «products», но вы пытаетесь получить доступ к элементу управления с таким именем.

Либо измените products на имя (или идентификатор) нужного элемента управления (и поскольку имена уникальны, избавьтесь от [0]), либо измените имена всех флажков на products.

У вас также есть ряд других проблем, которые напрямую не связаны с этой проблемой.

1. Вы используете <font>, который устарел, презентационный и мусор
2. Вы не используете <label>, который необходим для доступности (включая создание цели для кликов для флажков размером больше крошечного)
3. Вы кажетесь , использующими таблицы для макета
4. form слишком универсальный идентификатор
5. Лучший стиль document.form.ID_OF_FORM.elements.NAMES_OF_CHECKBOXES[0]
6. Свойство checked является логическим, == true является избыточным

Answer 2

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