Javascript - Сравнить, отмечен ли какой-либо флажок или нет

Question

Конечно, есть много решений этой проблемы, но я не нашел для себя решения.

У меня есть форма с несколькими флажками для выбора варианта (radio1a, radio1b, radio1 c, et c), , но я не могу определить, не установил ли мой пользователь флажок перед отправкой формы.

Я пробовал образец сценария, но предупреждения загружаются с страница, и это не то, что я ищу.

Примечание: Опция «отмечен» (для любого чекбокса) не подходит для меня, я должен оставьте все флажки снятыми.

Что я здесь делаю не так?

Заранее спасибо!

HTML:

<input id="radio1a" class="radiosobres" type="radio" name="radio" value="something>

<input id="radio1b" class="radiosobres" type="radio" name="radio" value="something>

<input id="radio1c" class="radiosobres" type="radio" name="radio" value="something>

<input id="radio1d" class="radiosobres" type="radio" name="radio" value="something>

<input id="radio1e" class="radiosobres" type="radio" name="radio" value="something>

<!-- ============== -->

<input id="pedir-sobres" type="submit" value="Pedir"/>

Скрипт Тест:

// ===========

jQuery 2.2.4

// ===========

$(".radiosobres").each(function () {
var id = $(this).attr("id");
if ($("#" + id).is(":not(:checked)")) {
alert("something...");
}
});

Answer 1

Я устанавливаю для каждой радиокнопки событие щелчка, которое добавляет к нему класс clicked. Поэтому, если вы нажмете кнопку отправки, я могу проверить, какой из rad ios имеет класс clicked, и вы можете действовать для этого.

$(".radiosobres").click( function() {
    $(this).addClass('clicked');
    }
)

$('#pedir-sobres').click(function() {
    let checkOk = false;
    $(".radiosobres").each(function () {
      if ( $(this).hasClass('clicked') ) {
        checkOk = true;
      }
    })
    
    if (!checkOk) {
      alert('Not all radios checked');
      return false;
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<form>
<input id="radio1a" class="radiosobres" type="radio" name="radio" value="something">
<input id="radio1b" class="radiosobres" type="radio" name="radio" value="something">

<input id="radio1c" class="radiosobres" type="radio" name="radio" value="something">

<input id="radio1d" class="radiosobres" type="radio" name="radio" value="something">

<input id="radio1e" class="radiosobres" type="radio" name="radio" value="something">

<!-- ============== -->

<input id="pedir-sobres" type="submit" value="Pedir"/>
</form>

Answer 2

Вот пара вещей. Во-первых, ваше предупреждение срабатывает, потому что вы устанавливаете его, когда радио не отмечено . Следовательно, как только страница загружается, каждый элемент запускает функцию, непроверенное условие истинно и срабатывает предупреждение.

Во-вторых, у вас есть некоторые проблемы с синтаксисом в вашем HTML. Избавьтесь от лишних пробелов в строках параметров и, что наиболее важно, не забудьте заключительные двойные кавычки " в HTML <inputs>. В вашем примере для каждого параметра value="something отсутствует закрывающий ".

Наконец, вам не нужно JQuery, чтобы убедиться, что выбран один из rad ios. Просто отметьте нужное :

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<form>
  <input id="radio1a" class="radiosobres" type="radio" name="radio" value="something" required>

  <input id="radio1b" class="radiosobres" type="radio" name="radio" value="something">

  <input id="radio1c" class="radiosobres" type="radio" name="radio" value="something">

  <input id="radio1d" class="radiosobres" type="radio" name="radio" value="something">

  <input id="radio1e" class="radiosobres" type="radio" name="radio" value="something">

  <!-- ============== -->

  <input id="pedir-sobres" type="submit" value="Pedir">
</form>