Zenn
Open1

🟣【DOM】4.4 ラジオボタン/チェックボックスの値を設定する

naonao

4.4-1 ラジオボタンの値を設定する
ラジオボタン／チェックポックスの値を設定する場合も、「NodeLstオブジェクトを取得→for...of
ループで個々の要素にアクセス」という流れは、取得の場合と同じです。個々の要素を取り出せたら、あとは設定したい値と同じvalue値を持つラジオポタン/チェックボックスを探し出し、合致した表素のchecked プロパティをtrueに設定します。
children

    <form>
      <div>
        好きな食べ物は？：

        <label
          ><input type="radio" name="food" value="ラーメン" /> ラーメン</label
        >
        <label><input type="radio" name="food" value="餃子" />餃子</label>
        <label><input type="radio" name="food" value="焼き肉" /> 焼き肉 </label>
        <input id="btn" type="button" value="送信" />
      </div>
    </form>

const setRadioValue = (name, value) => {
  let elems = document.querySelectorAll(`input[name="${name}"]`);
  for (let elem of elems) {
    if (elem.value === value) {
      elem.checked = true;
      break;
    }
  }
};
setRadioValue("food", "餃子");

ラジオボタンfoodの初期値が「餃子」に設定されている
children

4.4-2 チェックボックスの値を設定する

    <form>
      <div>
        好きな食べ物は？：
        <label
          ><input type="checkbox" name="food" value="ラーメン" />
          ラーメン</label
        >
        <label><input type="checkbox" name="food" value="餃子" />餃子</label>
        <label
          ><input type="checkbox" name="food" value="焼き肉" /> 焼き肉
        </label>
        <input id="btn" type="button" value="送信" />
      </div>
    </form>

type=radioではなく、type=checkboxにすることに注意

const setCheckValue = (name, values) => {
  let elems = document.querySelectorAll(`input[name="${name}"]`);
  for (let elem of elems) {
    elem.checked = values.includes(elem.value); //<-------①
  }
};
setCheckValue("food", ["餃子", "焼き肉"]);

children

チェックボックスの値を設定するsetCheckValue関数では、引数 valuesに配列を渡します。チェックボックスでは、複数の値を設定できなければならないからです。
このため、①でもArray#includes メソッドで、配列valuesに要素のvalue属性と等しいものがあるかをチェックしています。includes メソッドの戻り値はtrue／falseなので、これをそのままchecked
プロパティ（チェック状態）に反映させています。
ラジオボタンと異なり、1つが合致したあともループを終わらせずに、走査を継続している点にも注目です。