Javascript

Question

当然这里有很多解决这个问题的方法，但是我没有找到适合我的解决方法。

我有一个带有多个复选框的表单来选择一个选项（radio1a、radio1b、radio1c 等），但是在提交表单之前我无法检测到我的用户是否没有选中一个框。

我已经尝试了示例脚本，但是警报随页面一起加载，这不是我要找的。

注意： “选中”选项（对于任何复选框）对我来说是不可能的，我必须取消选中所有复选框。

我做错了什么？

提前致谢！

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

这里有几件事。首先，您的警报正在触发，因为您将其设置为在收音机 未选中 时触发。因此，一旦页面加载，每个元素都会运行该函数，未检查的条件为真，并触发警报。

其次，您的 HTML 中存在一些语法问题。去掉参数字符串中的多余空格，最重要的是，不要忘记 HTML <inputs> 中最后的双引号 "。在您的示例中，每个 value="something 参数都缺少其结束 ".

最后，您不需要 JQuery 来确保选择其中一个收音机。 Just mark one as required:

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

Answer 2

我在每个单选按钮上设置了一个点击事件，它添加了一个 class clicked。因此，如果您单击 submit-button，我可以检查哪个收音机具有 clicked-class，您可以为此采取行动。

$(".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>

Javascript - 比较是否标记了任何复选框

Javascript - Compare if any checkbox is marked or not

forms

validation

verification