需要複選框

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有關於此屬性的更多詳細信息。