2017-10-18 118 views
0

我已經看過類似的問題,但我仍然無法弄清楚如何解決它。在我的網頁上,我有一些無線電覆選框,我希望在進入下一個問題之前需要這些複選框。需要複選框

我有以下部分代碼:

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

     }); 

    }); 

但是,這隻適用於一個問題。當我將其添加到所有其他問題時,我仍然可以在單擊下一個問題按鈕時轉到以下問題,而這不是我想要的。

+1

歡迎SO。請理解,SO不是免費的編碼服務。你必須嘗試自己解決問題。如果無法正常工作,請發佈您嘗試的內容,我們會幫助您解決問題。 –

回答

0

無線電盒本質上相當簡單,因爲您應該在默認情況下選中一個無線電組中至少有一個選項。最好是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>

0

您可以使用checked屬性來設置默認選中的單選按鈕。

要檢查是否已選中與否,使用此代碼:

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