チェックボックスが必要になります

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> 

誰かが1個の放射性あなただけの次の質問に行くことができ、実際にすべてのラジオボックスのために働くのjavascriptのコードを、取得で私を助けることができますボックスが選択されていますか？

乾杯、 マックス

編集：私はこれまで試したことは以下の通りです： それはこのように見えたので、私は、ラベルに「必須」を追加しました：

<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つの質問に対してのみ問題ありません。これを他のすべての質問に追加すると、次の質問のボタンをクリックすると、次の質問に進むことができます。これは、私が望むものではありません。

Answer 1

ラジオボックスは、ラジオグループに少なくとも1つのオプションが常にデフォルトで選択されていなければならないという点でかなりシンプルです。好ましくは、N/Aまたは'Please Select'オプション。あなたはに対して検証したいと思われる場合

代わりオプション 'を選択してください'：あなたは本当にそれを検証したい場合は

//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はこの属性に関するさらに詳しい情報を持っています。