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

HTML5支持单选按钮的required属性。我做了一些搜索，HTML5: How to use the "required" attribute with a "radio" input field提供了有关此属性的更多详细信息。

Answer 2

无线电盒子本质上相当简单，因为默认情况下，你应该在一个无线电组中至少有一个选项。最好是 N / A 或＆＃39;请选择＆＃39; 选项。

在这种情况下，您需要对＆＃39;请选择＆＃39; 选项进行验证：

＆＃13;

//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!');
  }
});

＆＃13;

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

＆＃13;

<强>然而

如果您确实要验证是否已选中某个选项：

这应该有效：

＆＃13;

//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!');
  }
});

＆＃13;

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

＆＃13;

Answer 3

您可以使用checked属性设置默认选中的单选按钮。

要检查是否已选中，请使用以下代码：

  if ($('input[name=typesport]').attr('value') != undefined) {
    //execute code when it is checked
  } else {
    //execute code when it's not checked
  }

需要复选框

3 个答案: