Javascript включить флажок diabled при нажатии и выбрать только по одному за раз - PullRequest
Новая
       10

Javascript включить флажок diabled при нажатии и выбрать только по одному за раз

1 голос
/ 15 декабря 2011

Я динамически генерирую чекбоксы с таким идентификатором, как chkBox100 и т. Д., И с функцией onClick.

Что я хочу сделать, это

  1. Выбирать только один чекбокс одновременно.
  2. Если предыдущий флажок установлен, а другой флажок установлен, отмените предыдущий.
  3. Если я нажму на выбранный флажок, он должен снять его.

Я хочусделать это в стандартном javascript без jquery или любой другой библиотеки.

Пожалуйста, помогите, ваша помощь будет оценена.Вот мой код. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title> New Document </title>  

    <script type="text/javascript">

      function toggle(chkBox)
      {
        if (chkBox.checked)
        {
          chkBox.checked = false;
        }
        else
        {
          chkBox.checked = true;
        }

        // only select one at a time.
      }
    </script>
  </head>

  <body>
    <form id="myForm" name="myForm">
      <input type="checkbox" id="chkBox100"  onClick="toggle(this);">
      <input type="checkbox" id="chkBox121"  onClick="toggle(this);">
      <input type="checkbox" id="chkBox1180" onClick="toggle(this);">
    </form>
  </body>
</html>

Ответы [ 3 ]

5 голосов
/ 15 декабря 2011

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

Fiddle

2 голосов
/ 15 декабря 2011

Код, который вы пропустили, - это код, который отменит выбор остальных. Для этого вы должны сначала получить список всех флажков и отменить выбор всех из них. Затем выберите тот, на который пользователь нажал. 

function toggle(chkBox) {
    checkboxes = document.getElementById("myForm").childNodes;
    var isChecked = chkBox.checked; //this just changed, so it really is whether the box wasn't checked beforehand.
    for (var i = 0; i < checkboxes.length; i++) {
        checkboxes[i].checked = false;  //clear all of them
    }
    if (isChecked) {
        chkBox.checked = true; //if the original one wasn't checked, check it
    }
}

Альтернативой этому является использование переключателей, которые автоматически имеют первые два свойства, которые вы хотите, но не третье, хотя вы можете исправить это, как сказал РобГ, с другой опцией, говорящей «Ни один из вышеперечисленных». 1004 *

1 голос
/ 15 декабря 2011

Рассматривали ли вы использование переключателей с установленной по умолчанию кнопкой, которая фактически является опцией "нет выбора"? Не требуется JavaScript. 

<input type="radio" name="rb" value="zero">Zero
<br>
<input type="radio" name="rb" value="one">One
<br>
<input type="radio" name="rb" value="two">Two
<br>
<input type="radio" name="rb" value="None" checked>None of the above
...