javascript - 使复选框成为必填项

Question

我已经看过类似的问题，但我仍然不知道如何解决它。在我的网页上，我有一些单选复选框，我希望在进入下一个问题之前需要这些复选框。

我有以下部分代码:

 <p>
   Select the option that fits most to you<br><br>
   <label>
   <input type="radio" name="typesport" value="teamsport" > 
   I prefer a teamsport</label><br>
   <label>
   <input type="radio" name="typesport" value="individual"> 
   I prefer an individual sport</label><br>
 </p>
<a href="#question2" class="tm-bordered-btn">Next question</a>

有人可以帮我获取一个实际上适用于所有单选框的 JavaScript 代码吗？只有在选择 1 个单选框时，您才能转到下一个问题？

干杯，最大

编辑:到目前为止我尝试过的内容如下:我在标签中添加了“required”，所以它看起来像这样:

 <label><input type="radio" name="typesport" value="teamsport" required> I prefer a teamsport</label><br>

我还将 ID 添加到了按钮:

 <a href="#question2" class="tm-bordered-btn" id="checkBtn">Next question</a>

此外，我使用了这个 JS 脚本:

  $(document).ready(function () {
      $('#checkBtn').click(function() {
        checked = $("input[type=radio]:checked").length;

        if(!checked) {
          alert("You must check at least one radio.");
          return false;
        }

      });

  });

但是，这只适用于一个问题。当我将其添加到所有其他问题时，当我单击“下一个问题”按钮时，我仍然可以转到下一个问题，但这不是我想要的。

Answer 1

单选框本质上相当简单，因为默认情况下您应该始终在单选组中至少选中一个选项。最好是不适用或“请选择”选项。

在这种情况下，您需要验证“请选择”选项:

//when user clicks <a> element
$(".next-button").click(function() {
  //group on radio button name and test if checked
  if ($("input[name='typesport']:checked").val() == 'select') {
    alert('Nothing is checked!');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
  Select the option that fits most to you<br><br>
  <label><input type="radio" name="typesport" value="select" checked="true" > Please Select </label><br>
  <label><input type="radio" name="typesport" value="teamsport" > I prefer a teamsport</label><br>
  <label><input type="radio" name="typesport" value="individual"> I prefer an individual sport</label><br>
</p>
<a href="#question2" class="tm-bordered-btn next-button">Next question</a>

但是

如果您确实想验证某个选项是否已被选中:

这应该有效:

//when user clicks <a> element
$(".next-button").click(function()
{
  //group on radio button name and test if checked
  if (!$("input[name='typesport']:checked").val()) {
   alert('Nothing is checked!');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>
 Select the option that fits most to you<br><br>
 <label><input type="radio" name="typesport" value="teamsport" > I prefer a teamsport</label><br>
 <label><input type="radio" name="typesport" value="individual"> I prefer an individual sport</label><br>
 </p>
<a href="#question2" class="tm-bordered-btn next-button">Next question</a>