JSを使用してラジオボタンの値を取得

問題：ラジオボタンまたは値の値をテキストボックスで取得できませんでした。JSを使用してラジオボタンの値を取得

試行錯誤から、私は次のように私は性別や年齢の値を取得する方法を見つけ出すことができなかった私のdiv gender1

内の情報へのアクセスを提供することを発見しました。 id属性を使用して.value/.value（）を追加しようとしました。また、スタックオーバーフロー（Get Radio Button Value with Javascript）に関する関連する質問からさまざまなメソッドを試しましたが、ほとんど成功しませんでした。

var checkedRadio = document.querySelectorAll('.w3-container')[0] 
 
         .querySelectorAll('#box')[0] 
 
        .querySelector('#gender1'); 
 

 
console.log(checkedRadio);

<body> 
 
    <div class="w3-container"> 
 
    <div id="box" style="width:600px;height:650px;padding:10px;border:2px solid black;"> 
 
     <h5><b>Age (years):</b></h5> 
 
     <div id="age"> 
 
     <input type="number" name="age1"> 
 
     <br> 
 
     </div> 
 
     <div id="gender1"> 
 
     <h5><b>Male or Female?</b>: 
 
        <input type="radio" id="r1" name="gender" value="Male"> Male 
 
        <input type="radio" id="r2" name="gender" value="Female"> Female 
 
       </h5> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body>

出典

2017-01-29 user2657817

あなたは値を取得するために

document.querySelector('input[name="gender"]:checked').value

を使用することができます。

var age = document.querySelector('input[type=number][name=age1]').value; 
var gender = document.querySelector('input[type=radio]:checked').value;

参照のデモ：

document.getElementById("btn_click").addEventListener("click", function(){ 
 

 
    
 
    if(document.querySelector('input[name="age1"]').value !== "" && document.querySelector('input[name="gender"]:checked') !== null) 
 
    { 
 
    console.log("Age : ", document.querySelector('input[name="age1"]').value); 
 
    console.log("Gender : ", document.querySelector('input[name="gender"]:checked').value); 
 
    } 
 
    else 
 
    { 
 
    console.log("Please provide all the details.") 
 
    } 
 
});

<body> 
 
    <div class="w3-container"> 
 
    <div id="box" style="width:600px;height:650px;padding:10px;border:2px solid black;"> 
 
     <h5><b>Age (years):</b></h5> 
 
     <div id="age"> 
 
     <input type="number" name="age1"> 
 
     <br> 
 
     </div> 
 
     <div id="gender1"> 
 
     <h5><b>Male or Female?</b>: 
 
        <input type="radio" id="r1" name="gender" value="Male" > Male 
 
        <input type="radio" id="r2" name="gender" value="Female"> Female 
 
       </h5> 
 
     </div> 
 
     <input type="button" id="btn_click" value="Click"> 
 
    </div> 
 
    </div> 
 
</body>

出典

2017-01-29 09:17:12 Deep

ありがとうDeep！しかし、この答えをテストするには、ラジオボタンの1つを選択する必要があります。それ以外の場合はnullが返されます。私はこれを述べて正しいですか？ – user2657817

@ user2657817それは問題ですか？ページがロードされると、ラジオボタンは選択されません... Deepは '＃r2'に' checked'属性を持っているので注意してください... – kukkuz

@ user2657817私はちょうどユーザが値を選択できるようにスニペットを修正しましたリストを印刷します。以前のスニペットはページの読み込み時に値を出力していたので、kukkuzが説明したように、html自体にchecked属性を入れました。 – Deep

あなたはテキストボックス値かのがラジオボタンのようにチェック値を選択しquerySelectorを使用することができます以下：

function submit() { var age = document.querySelector('input[type=number][name=age1]').value; var gender = document.querySelector('input[type=radio]:checked').value; console.log(age, gender); }

<div class="w3-container"> <div id="box" style="width:600px;height:650px;padding:10px;border:2px solid black;"> <h5><b>Age (years):</b></h5> <div id="age"> <input type="number" name="age1"> <br> </div> <div id="gender1"> <h5><b>Male or Female?</b>: <input type="radio" id="r1" name="gender" value="Male"> Male <input type="radio" id="r2" name="gender" value="Female"> Female </h5> </div> </div> </div> <button onclick="submit()">Click me</button>

出典

2017-01-29 09:17:23 kukkuz

同じページに複数のラジオがある場合はどうなりますか？ –

Ataur Rahman Munna、私は、ラジオボタンの値を取得するために、型の代わりに "名前"引数を使うことができると思います。 – user2657817

:) 'document.querySelector（ '#box input [type = radio]：checked'）'を使用することができます... – kukkuz

あなたはjavascriptのonclickイベントを使用することができます。例以下、

<script> 
function getGender(gender) { 
    alert(gender); 
} 
</script>  
<body> 
     <div class="w3-container"> 
      <div id="box" style="width:600px;height:650px;padding:10px;border:2px solid black;"> 
       <h5><b>Age (years):</b></h5> 
       <div id="age"><input type="number" name="age1"><br></div> 
       <div id="gender1"> 
        <h5><b>Male or Female?</b>: 
         <input type="radio" id="r1" name="gender" onclick = "getGender(this.value)" value="Male"> Male 
         <input type="radio" id="r2" name="gender" onclick = "getGender(this.value)" value="Female"> Female 
        </h5> 
       </div> 
      </div> 
     </div> 
     </body>

<script> 
function getValues() { 
    // Get value of selected radio button 
    var genderVal; 
    if (document.getElementById('r1').checked) { 
    genderVal = document.getElementById('r1').value; 
    } else if (document.getElementById('r2').checked) { 
    genderVal = document.getElementById('r2').value; 
    } 

    alert("Value of textbox:"+ document.getElementsByName("age1")[0].value+" Value of radio button:"+ genderVal); 
} 
</script> 

<body> 
    <div class="w3-container"> 
    <div id="box" style="width:600px;height:650px;padding:10px;border:2px solid black;"> 
      <h5><b>Age (years):</b></h5> 
      <div id="age"><input type="number" name="age1"><br></div> 
      <div id="gender1"> 
      <h5><b>Male or Female?</b>: 
       <input type="radio" id="r1" name="gender" onclick = "getGender(this.value)" value="Male"> Male 
       <input type="radio" id="r2" name="gender" onclick = "getGender(this.value)" value="Female"> Female 
      </h5> 
      </div> 
      <div> 
      <input type="button" value="GetValues" onclick="getValues()"> 
      </div> 
     </div> 
     </div> 
</body>

に見てください。上記の例はあなたに役立ちます願っています。

出典

2017-01-29 09:51:42

JSを使用してラジオボタンの値を取得

答えて

関連する問題