特定の「value」の値を持っているinputに対して「checked」を「true」にしたい

Question

前提・実現したいこと

「document.getElementsByClassName」で取得した特定のclassを持つinputの中から、特定の「value」の値を持っているものに対して「checked」を「true」にしたいです。
詳しい方おりましたらご教授頂けますと助かります。

Comments

[yambejp]

もう少し具体的にお願いします。
checkedプロパティをもたないtype=textとかどうするのですか？
checkedするタイミングやトリガーはどうするのでしょうか？

[kihara]

ご指摘ありがとうございます。
typeはradioで読み込み時に特定の名称が含まれるvalueのものにcheckedしたいです。

[yambejp]

ラジオボタンはHTML要素ごとに排他的な処理が必要なので
処理が競合しますが大丈夫なのでしょうか？

特定のクラスをつけておなじvalueを持つものが複数ある場合
同じnameがついているとどちらかにしかチェックできません

[kihara]

valueを持つのはそれぞれ1種類ずつなので、競合の心配はございません。
radioで選択した際にvalueを付与したページへ推移を行い、ページ推移後のページのlocation.searchの値と同じradioにcheckを行いたいという状況です。

Answer 1

チェックボックスのような任意にvalueの変化させないものなら属性から参照できます
例)valueが1でaクラスを持つものをチェックする

<label><input type="checkbox" value="1" class="a">1:a</label>
<label><input type="checkbox" value="1" class="a b">1:a b</label>
<label><input type="checkbox" value="1" class="b">1:b</label>
<label><input type="checkbox" value="2" class="a">2:a</label>
<label><input type="checkbox" value="2" class="a b">2:a b</label>
<label><input type="checkbox" value="2" class="b">2:b</label>
<script>
document.querySelectorAll('.a[value="1"]').forEach(x=>{
  x.checked=true;
});
</script>

Comments

[kihara]

迅速なご回答を頂き誠にありがとうございます！
ちなみに完全一致ではなく、○○が含まれるvalueという指定方法は可能でしょうか？

[yambejp]

すみません。回答がまちがえていたので修正しました。
かりに1を含む123とかx1Yとかをヒットさせたいならセレクタを
document.querySelectorAll(`.a[value*="1"]`).forEach(x=>{
x.checked=true;
});
のような属性セレクタを利用ください

[kihara]

ありがとうございます。
度々のご質問で恐縮ですが、
.a[value*="1"]
の"1"の部分を定数で指定したい場合はどのように記述すればよいでしょうか？

[yambejp]

> "1"の部分を定数で指定したい場合

考え方が逆です。「1」という定数で指定したのが例示したサンプルです

[kihara]

説明が分かりにくくて申し訳ございません。
constで定義しているものを1の部分に入れたい場合はどのように記述すれば良いでしょうか？

[yambejp]

const hoge="1";
document.querySelectorAll(`.a[value*="${hoge}"]`)

[kihara]

ありがとうございます！おかげ様で実装できました。