イメージ内の選択したラジオボタンの値を取得します。

ラジオボタンの値をユーザーの選択に従って表示したいのですが、アラート中に値を取得できませんでした。ユーザーが男性を選ぶときに男性PICはイメージ内の選択したラジオボタンの値を取得します。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
</head> 
<body> 
<form id="test"> 
<h4>Gender</h4> 
    <input type="radio" name="gender" value="male"> Male<br> 
    <input type="radio" name="gender" value="female"> Female<br> 
    <h4>Occupation</h4> 
    <input type="radio" name="occupation" value="PvtJob">Pvt. Job<br> 
    <input type="radio" name="occupation" value="Govt">Govt. Employee<br> 
    <h4>Loan Type</h4> 
    <input type="radio" name="loan" value="Personal">Personal Loan<br> 
    <input type="radio" name="loan" value="Health">Health Loan<br><br> 
<button class="btn btn-primary pull-right place-order-button" name="submit" value="submit" onclick="return myFunction()" type="submit" >Finish</button> 
</form> 
</body> 
<script type="text/javascript"> 
    function myFunction() { 
     var radioButtons =["gender","occupation","loan"]; 

     for(var x = 0; x < radioButtons.length; x ++) { 
      if ($('input[name = "'+radioButtons[x]+'"]:checked','#test').val()) { 
       alert("You checked " + $('input[name = "'+radioButtons[x]+'"]:checked','#test').attr('id')); 
       alert("Value is " + $('input[name = "'+radioButtons[x]+'"]:checked','#test').val()); 
     } 
    } 
} 
</script> 
</html>

出典

2016-09-19 nady gold

これは、ボタンのクリックやラジオボタンをクリックして必要とされますか？ – Samir

そして条件が間違っていると思います。 – Samir

jQueryライブラリ – Satpal

を示しように私も..画像としてラジオボタンの値を表示するには、コード内でjqueryのを含めると、あなたの入力で述べた鼻水属性IDがあります。また、あなたのコードにはテストのようなIDはありません。セレクタをもう一度繰り返す必要はなく、簡単に使用できます$(this)

次のスニペットを試してみてください。

function myFunction() { 
 
     var radioButtons =["gender","occupation","loan"]; 
 

 
     for(var x = 0; x < radioButtons.length; x ++) { 
 
      if ($('input[name = "'+radioButtons[x]+'"]:checked').val()) { 
 
       alert("Value is " + $(this).val()); 
 
     } 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<body> 
 
<form id="test"> 
 
<h4>Gender</h4> 
 
    <input type="radio" name="gender" value="male"> Male<br> 
 
    <input type="radio" name="gender" value="female"> Female<br> 
 
    <h4>Occupation</h4> 
 
    <input type="radio" name="occupation" value="PvtJob">Pvt. Job<br> 
 
    <input type="radio" name="occupation" value="Govt">Govt. Employee<br> 
 
    <h4>Loan Type</h4> 
 
    <input type="radio" name="loan" value="Personal">Personal Loan<br> 
 
    <input type="radio" name="loan" value="Health">Health Loan<br><br> 
 
<button class="btn btn-primary pull-right place-order-button" name="submit" value="submit" onclick="return myFunction()" type="submit" >Finish</button> 
 
</form> 
 
</body>

出典

2016-09-19 11:00:01

あなたはjQueryの機能を使用しているので、あなたはあなたのヘッダーにjQueryライブラリを追加する必要があります。ヘッダ部に

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

を追加してください、あなたがオブジェクトのlength proprtyを使用して、選択した要素を確認することができます

出典

2016-09-19 11:01:04

してみてください。 jqueryライブラリパスをHTMLページに追加してください。

function myFunction() { 
 
     var radioButtons =["gender","occupation","loan"]; 
 

 
     for(var x = 0; x < radioButtons.length; x ++) { 
 
      selected=$('input[name = "'+radioButtons[x]+'"]:checked','#test'); 
 
      if (selected.length>0) { 
 
       
 
       alert(radioButtons[x] + ":: Value is " + selected.val()); 
 
     } 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<form id="test"> 
 
<h4>Gender</h4> 
 
    <input type="radio" name="gender" value="male" id=""> Male<br> 
 
    <input type="radio" name="gender" value="female"> Female<br> 
 
    <h4>Occupation</h4> 
 
    <input type="radio" name="occupation" value="PvtJob">Pvt. Job<br> 
 
    <input type="radio" name="occupation" value="Govt">Govt. Employee<br> 
 
    <h4>Loan Type</h4> 
 
    <input type="radio" name="loan" value="Personal">Personal Loan<br> 
 
    <input type="radio" name="loan" value="Health">Health Loan<br><br> 
 
<button class="btn btn-primary pull-right place-order-button" name="submit" value="submit" onclick="return myFunction()" type="submit" >Finish</button> 
 
</form>

出典

2016-09-19 11:04:59

への参照を追加する必要があります。しかし、私は選択された値を、選択された値を男性のように表示したいと思っています。 –

あなたのHTMLコードを表示イメージに置くことはできますか？ –

私は試みましたが、値をイメージとして取得できませんでした –

イメージ内の選択したラジオボタンの値を取得します。

答えて

関連する問題