需要复选框

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个放射框被选中？

干杯， 最大

编辑：我已经试过到目前为止如下： 我说“需要”的标签，所以它看起来像这样：

<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

无线电盒本质上相当简单，因为您应该在默认情况下选中一个无线电组中至少有一个选项。最好是N/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() == '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>

Answer 2

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

要检查是否已选中与否，使用此代码：

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

Answer 3

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