Проверка наличия хотя бы одного переключателя - JavaScript

Ответ 1

Зацикливаясь на тегах <input>, проверяйте тип и проверяется ли он.

function isOneChecked() {
  // All <input> tags...
  var chx = document.getElementsByTagName('input');
  for (var i=0; i<chx.length; i++) {
    // If you have more than one radio group, also check the name attribute
    // for the one you want as in && chx[i].name == 'choose'
    // Return true from the function on first match of a checked item
    if (chx[i].type == 'radio' && chx[i].checked) {
      return true;
    } 
  }
  // End of the loop, return false
  return false;
}

Вот это в действии на jsfiddle

Ответ 2

Что-то вроде этого должно сделать трюк

if ($("input[type=radio]:checked").length > 0) {
    // Do your stuff here
}

UPDATE Не видел, что он не должен иметь jQuery, поэтому здесь альтернативная функция для проверки того, что в чистом JS

 function check(){
     var radios = document.getElementsByName("choice");

     for (var i = 0, len = radios.length; i < len; i++) {
          if (radios[i].checked) {
              return true;
          }
     }

     return false;
 }

Ответ 3

Это возможно обойтись без javascript, если ваши целевые браузеры поддерживают атрибут HTML5.

<input type="radio" name="choose" value="psychology" required>
<input type="radio" name="choose" value="geography" required>
<input type="radio" name="choose" value="gastronomy" required>

Обратите внимание, что в хром вам нужно только поставить required на один из входов. Я не уверен, что делают другие браузеры.

Я обычно делаю это в дополнение к проверке javascript (например, выбранным ответам), так что поддерживаются html 4-браузеры.

Ответ 4

Я решил это так.

if(document.querySelector('input[name="choice"]:checked') == null) {
    window.alert("You need to choose an option!");
}

Ответ 5

Поскольку вы сказали, что вам нужно знать, выбран ли хотя бы один вход, вам скорее всего нужны флажки, а не переключатели. (Вы можете выбирать только один переключатель за раз из группы переключателей, которые имеют значение name.)

Вероятно, вы должны отбросить теги font и немного обновить свой HTML-код:

HTML

<h1>Choose</h1>
<div>
    <input type="checkbox" id="ckb-psychology" name="choose" value="psychology">
    <label for="ckb-psychology" class="blue">Instant Psychology</label>
</div>
<div>
    <input type="checkbox" id="ckb-geography" name="choose" value="geography">
    <label for="ckb-geography" class="red">Instant Geography</label>
</div>
<div>
    <input type="checkbox" id="ckb-gastronomy" name="choose" value="gastronomy">
    <label for="ckb-gastronomy" class="purple">Instant Gastronomy</label>
</div>
<input type="submit" name="Submit" value="Go">

CSS

label { font-size: 1.5em; }

.blue { color: #0033CC; }
.red { color: #CC0000; }
.purple { color: #660033; }

JavaScript

function isOneChecked ( name ) {

    var checkboxes = document.getElementsByName( name ),
        i = checkboxes.length - 1;

    for ( ; i > -1 ; i-- ) {

        if ( checkboxes[i].checked ) { return true; }

    }

    return false;
}

Ответ 6

Вопрос задается для решения JS. Однако, здесь очень простой трюк, чтобы сделать это с помощью HTML. Вы можете просто использовать required ключевое слово в HTML input tag.

Образец кода

<input type="radio" name="gender" value="male" required>Male<br>
<input type="radio" name="gender" value="female">Female

Ваша форма

Обратите внимание, что вам нужно всего лишь упомянуть required ключевое слово для всей радиогруппы.

<form method="post" enctype="application/x-www-form-urlencoded">
    <h1>Choose</h1>

    <p><input type="radio" name="choose" value="psychology" required><font size="5" color="#0033CC">Instant Psychology</font><br>
    <br>
    <input type="radio" name="choose" value="geography"><font size="5" color="#CC0000">Instant Geography</font><br>
    <br>
    <input type="radio" name="choose" value="gastronomy"><font size="5" color="#660033">Instant Gastronomy</font><br>
    <br>
    <input type="submit" name="Submit" value="Go"></p>
  </form>