mdlラジオボタンから値を取得する

Question

次のコードで、変数名でチェックすると、ラジオが正しい値を報告しないのはなぜですか？

var $myRadio = $('input[type=radio][name=options]:checked'); 

$('#button').click(() => { 
    // this works 
    console.log($('input[type=radio][name=options]:checked').val()); 
    // this doesn't :(
    console.log($myRadio.val()); 
}); 

https://jsfiddle.net/charsi/p4beztwx/13/

それはそれを引き起こしている可能性がありますので、私はmdlラジオボタンを使用しています。私も$myRadio[0].MaterialRadio.valueで値を取得しようとしましたが、どちらも動作しません。

編集：これはよく言われていない質問で、実際にMDLとは関係がありませんでした。私が本当に欲しかったのは、値を確認するために再び名前を選択することなく、ラジオボタンのDOM変数をどこか別の場所に設定できることでした。

Answer 1

クリックしたイベントの前に$myRadioを設定しているため、変数名でチェックしたときに値が不正確になるのはその理由です。 $myRadioは、文書準備完了（クリックイベント前）に設定され、現在のところ常に1のチェックされたラジオオプションの値を取得します。

クリックハンドラー内で移動する$myRadioが有効です。どうして？これは、実際に必要なものであるクリック機能が呼び出されるとすぐにラジオの値を取得するためです（チェックされています）。同じ問題に実行している他の誰のために

$('#button').click(() => { 
    var $myRadio = $('[id^="option"]:checked'); 
    // neither of these work 
    alert($('input[type=radio][name=options]:checked').val()); 
    alert($myRadio.val()); 

}); 

フィドルhere

Answer 2

。値を確認するときにラジオボタン名を呼びたくない場合は、filter -

var $myRadio = $('input[type=radio][name=options]'); 

$('#button').click(() => { 
    console.log($myRadio.filter(':checked').val()); 
}