jQueryでnameとvalueを指定してラジオボタンを選択状態にする方法

こんにちは、さるまりんです。

jQueryのセレクタって色々ありますよね。

ラジオボタンを名前と値で選択状態にするにはこんな風に指定します。

$('input:radio[name="名前"][value="値"]').prop('checked', true);

例えば

<input type="radio" name="color" value="red"> 赤
<input type="radio" name="color" value="blue"> 青
<input type="radio" name="color" value="green"> 緑
<input type="radio" name="color" value="yellow"> 黄

のnameがcolorのラジオボタン、4色から青(blue)を選ぶのは

$('input:radio[name="color"][value="blue"]').prop('checked', true);

です。

上の’radio’を’checkbox’に変えるだけでチェックボックスでもいけます。

$('input:checkbox[name="名前"][value="値"]').prop('checked', true);

例えば

<input type="checkbox" name="day_of_week" value="sun"> 日
<input type="checkbox" name="day_of_week" value="mon"> 月
<input type="checkbox" name="day_of_week" value="tue"> 火
<input type="checkbox" name="day_of_week" value="wed"> 水
<input type="checkbox" name="day_of_week" value="thu"> 木
<input type="checkbox" name="day_of_week" value="fri"> 金
<input type="checkbox" name="day_of_week" value="sat"> 土

のnameがday_of_week、曜日のチェックボックスから火曜日(tue)と金曜日(fri)を選ぶのは

$('input:checkbox[name="day_of_week"][value="tue"]').prop('checked', true);
$('input:checkbox[name="day_of_week"][value="fri"]').prop('checked', true);

です。

jQuery便利ですね。もっと使い方を覚えていきたいです。

読んでくださってありがとうございました。

それではまた！