jQuery ラジオボタンのidによるチェック状態の取得について

Question

ワードプレスでJqueryを使って、あるラジオボタンをチェックすると、他のラジオボタンがチェックされるようにしたいと思っています。

最初は、ラジオボタンのフィールドネームを使って動かしていたのですが、フィールドネームではなく、idを使う必要がでてきました。

最初に使って動作していたコードは以下ですが、if以下のname=fieldname1_1ではなくて、このラジオボタンのid(field_1-15)を使って、value=1の時に同じ動作をするようにしたいです。
初心者で、input要素のvalue値取得について色々調べても分からず、質問させていただきました。

jQuery(function($){
$(function() {
 $('input[type=radio]').change(function() {
    if ( $('input[name=fieldname1_1]:eq(1)').prop('checked')) {
        $('input[name=bccf_payment_option_paypal]:eq(1)').prop('checked', true);
    } else {
        $('input[name=bccf_payment_option_paypal]:eq(0)').prop('checked', true);
    }
});
});
});

Answer 1

シャープ(#)で始まるセレクターは、id属性値で指定します

#id - jQuery 日本語リファレンス

Comments

[bigcat]

ありがとうございます。

id属性値の説明も読みましたが、value=1がチェックされた状態というのを、どのようにコードにするかが分かりませんでした。例えば、サイトを参考に以下のようにして変えてみましたが、動作しませんでした。
$('#field_1-15 option[value="1"]').prop('checked')

[Lhankor_Mhy]

$('#field_1-15').prop('checked')
でいいのでは。

[bigcat]

value値が1と2があり、１をチェックした場合のコードが必要です。

[Lhankor_Mhy]

うーん？ラジオボタンですよね？

IDをつけるなら、
<input type="radio" id="field_1-15" name="fieldname1_1" value="1">
<input type="radio" id="field_1-16" name="fieldname1_1" value="2">
のようにvalueごとに違うIDがついているはずですよね？

[Lhankor_Mhy]

まあ、どうやら想定しているものが行き違っているようなので、HTMLソースを挙げてもらった方が話が早そうですね。

[bigcat]

ご教示いただいた通り、valueごとにidが付いていました。
yambejpさんの回答も参考にしながら進めてみたいと思います。
ありがとうございました。

Answer 2

このラジオボタンのid(field_1-15)を使って、value=1の時に同じ動作をする

厳密にはこれは無理です
というのはchangeイベントは外れたときには発動しないからです

Comments

[yambejp]

動かない例
<script>
$(function(){
$('#field_1-15').on('change',function(){
console.log(1);
});
});
</script>
fieldname1_1
<input type="radio" name="fieldname1_1">
<input type="radio" name="fieldname1_1" id="field_1-15">
<hr>
bccf_payment_option_paypal
<input type="radio" name="bccf_payment_option_paypal">
<input type="radio" name="bccf_payment_option_paypal">

[yambejp]

結局こんな感じになって、むしろ冗長になりがちです

<script>
$(function(){
$('[name='+$('#field_1-15').attr('name')+']').on('change',function(){
var idx=$('[name='+$('#field_1-15').attr('name')+']').index(this);
$('[name=bccf_payment_option_paypal').eq(idx).prop('checked',true);
});
});
</script>
fieldname1_1
<input type="radio" name="fieldname1_1">
<input type="radio" name="fieldname1_1" id="field_1-15">
<hr>
bccf_payment_option_paypal
<input type="radio" name="bccf_payment_option_paypal">
<input type="radio" name="bccf_payment_option_paypal">

[bigcat]

ご丁寧にコードを書いていただきありがとうございます。
しかし、試してみましたが、動作しないようです。

知識不足で申し訳ございません。どこが違うか分からないので、別の方法も探してみようかと思います。

[yambejp]

> 動作しないようです。

以下動作確認してみてください
https://codepen.io/yambejp/pen/xxGKGOj

[bigcat]

idとなるとぐっと複雑になるのですね。
この件、自動見積のプラグインの関係で、同じページ内に、同じフィールドネームのラジオボタンが生成されるため、どうしてもidによる判別が必要だったのです。

[bigcat]

返信が前後してしまったようです。
リンクありがとうございます。お手数をおかけしました。
返事が少し後になってしまいますが、試させていただきます。

[bigcat]

申し訳ございません。いただいたリンクで動作確認いたしました。
これを参考に進めてみたいと思います。
ご丁寧にお教えいただきありがとうございました。