どのラジオフォームが選択されているかをjavascriptで確認する

Question

私は犬の競争をしようとしています。 基本的に私が望むのは、ユーザーがチェックしたラジオを確認することです。 は1〜5の乱数と比較して、彼が勝ったかどうかを確認します。

私の質問は...私はそれらをどのように比較しますか？

これは、これまでの私のコードです。

function chooser(){ 
    var theDogs = ["dog1","dog2","dog3","dog4","dog5"], 

    rand = theDogs[Math.floor(Math.random() * theDogs.length)]; 

    document.getElementById("winner").innerHTML = rand; 


if(pick == rand) 
    {document.getElementById("winner").innerHTML =("win!");} 
     else { 
      document.getElementById("winner").innerHTML =("loose"); 
     } 
    } 

HTML：

<form id="pick" action="rand"> 
<input type="radio" name="dog" id="dog1">Dog1<br> 
<input type="radio" name="dog" id="dog2">Dog2<br> 
<input type="radio" name="dog" id="dog3">Dog3<br> 
<input type="radio" name="dog" id="dog4">Dog4<br> 
<input type="radio" name="dog" id="dog5">Dog5<br> 
</form> 

<br> 
<br> 
     <input type="submit" value="Gamble" onclick="chooser();"> 
<br> 

<p id="winner"> </p> 

Answer 1

jQueryとネイティブJavaScriptアプローチ。好きなのを選びな。

$("#submitjq").click(function() { 
 
     var theDogs = ["dog1","dog2","dog3","dog4","dog5"], 
 

 
     rand = theDogs[Math.floor(Math.random() * theDogs.length)]; 
 

 
     var pick = $("input[type=radio][name='dog']:checked").val(); 
 
     if(pick == rand) 
 
     { 
 
      $("#winner").html("jQuery: Won!"); 
 
     } 
 
     else { 
 
      $("#winner").html("jQuery: Lost!"); 
 
     } 
 
}); 
 
    
 
document.getElementById('submitjs').onclick = function() { 
 
\t \t \t var theDogs = ["dog1","dog2","dog3","dog4","dog5"], 
 

 
     rand = theDogs[Math.floor(Math.random() * theDogs.length)]; 
 

 
     var pick = document.pick.dog.value; 
 
     console.log(pick); 
 
     if(pick == rand) 
 
     { 
 
      document.getElementById("winner").innerHTML = "JavaScript: Won!" ; 
 
     } 
 
     else { 
 
      document.getElementById("winner").innerHTML = "JavaScript: Lost!" ; 
 
     } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="pick" name="pick" action="rand"> 
 
<input type="radio" name="dog" value="dog1">Dog1<br> 
 
<input type="radio" name="dog" value="dog2">Dog2<br> 
 
<input type="radio" name="dog" value="dog3">Dog3<br> 
 
<input type="radio" name="dog" value="dog4">Dog4<br> 
 
<input type="radio" name="dog" value="dog5">Dog5<br> 
 
</form> 
 

 
<br> 
 
<br> 
 
     <input type="submit" id="submitjs" value="Gamble Native JavaScript" /> 
 
     <input type="submit" id="submitjq" value="Gamble jQuery" /> 
 
<br> 
 

 
<p id="winner"> </p>

Answer 2

あなたがチェックだものを見つけるために繰り返し処理、各ラジオボタンに値を与える必要があり、その後、getElementsByName。 See similar thread...