私は、コードのこの部分を持っているjqueryの

Question

を使用して、ラジオボタンの値を取得します。

var checkout_options = $("#checkout").find("input[type='radio']"); 
 
    $('#button-account').on('click', function() { 
 
      alert(checkout_options.value); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> 
 
<div id="checkout"> 
 
    <p>Checkout Options:</p> 
 
    <label for="register"> 
 
     <input type="radio" name="account" value="register" id="register" checked> 
 
     <b>Register Account</b></label> 
 
    <br> 
 
    <label for="guest"> 
 
     <input type="radio" name="account" value="guest" id="guest"> 
 
     <b>Guest Checkout</b> 
 
    </label> 
 
    <input type="button" value="Continue" id="button-account"> 
 
</div>

私はそれが選択したラジオボタンの値を取得することですが、私のコードで欲しいです私は最初のラジオボタンの値を取得し、2番目のラジオは機能しません。 エラーを修正するのを助けてください。

Answer 1

コールバック内の要素を参照するには、thisを使用する必要があります。だからthis.valueまたは$(this).val()メソッドを使用して値を取得します。 :checked疑似クラスセレクタを使用しないでください。それ以外の場合は、最初の要素のみが選択されます。

var selected = $("#checkout").find("input[type='radio']"); 
 
    selected.change(function(){ 
 
     alert(this.value); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> 
 
<div id="checkout"> 
 
    <p>Checkout Options:</p> 
 
    <label for="register"> 
 
     <input type="radio" name="account" value="register" id="register" checked> 
 
     <b>Register Account</b></label> 
 
    <br> 
 
    <label for="guest"> 
 
     <input type="radio" name="account" value="guest" id="guest"> 
 
     <b>Guest Checkout</b> 
 
    </label> 
 
</div>

---

あなたはあなたのハンドラのみが添付されている:radio疑似クラスセレクタ

$("#checkout :radio").change(function() { 
 
    alert(this.value); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> 
 
<div id="checkout"> 
 
    <p>Checkout Options:</p> 
 
    <label for="register"> 
 
    <input type="radio" name="account" value="register" id="register" checked> 
 
    <b>Register Account</b> 
 
    </label> 
 
    <br> 
 
    <label for="guest"> 
 
    <input type="radio" name="account" value="guest" id="guest"> 
 
    <b>Guest Checkout</b> 
 
    </label> 
 
</div>

Answer 2

を使用して、それを簡単にすることができますチェックされているラジオボタンには適用されないので、2番目のラジオボタンのハンドラは存在しません。

Answer 3

最初にチェックされた値のイベントハンドラだけを登録するので、ハンドラを両方のラジオボタンにアタッチしても機能しませんでした。

var selected = $("#checkout").find("input[name='account']"); 
selected.change(function(){ 
    alert($(this).val()); 
}); 

これはまた、現在のラジオボタングループが含まれていることを確認しますので、あなたは追加のものを持つことができます。これは、動的に値の変更を反映させるようにする方法です。

Jsfiddle： https://jsfiddle.net/sjmhdasw/

Answer 4

ちょうどそれが型ラジオのすべての入力にイベントリスナーをバインド

$("input[type='radio']").on("change", function() { console.log(this.id + " checked !"); });

を使用！

あなたの助けを提供するための変数（あなたのコードのどこか、それで何かをやっている場合を除き）