JavaScript HTML要素関係の関数サンプル

HTML要素関係の関数サンプルコードです。

/**
 * ラジオボックスグループのチェックをvalueとある値の一致可否で設定します。
 * @example setCheckedRadioElementsByValue("radio1", "123")
 */
function setCheckedRadioElementsByValue(name, value) {
    for (let el of document.getElementsByName(name)) {
        el.checked = el.value === value;
    }
}

/**
 * ラジオボックスグループの最初に見つかったチェック済み要素を返します。
 * @return 最初に見つかったチェック済み要素またはnull。
 * @example getFirstCheckedRadioElementByName("radio1")
 */
function getFirstCheckedRadioElementByName(name) {
    for (let el of document.getElementsByName(name)) {
        if (el.checked) return el;
    }
    return null;
}

/**
 * idの配列を指定してINPUT要素のvalueを空にします。
 * @example clearElementsValueById(["text1","text2","text3"])
 */
function clearElementsValueById(ids) {
  for (let id of ids) {
        document.getElementById(id).value = "";
  }
}

/**
 * {id: value, ...}形式のオブジェクトを受け取り、idが一致する要素のvalueを設定します。
 * @example setElementsValueById({text1:"text1", text2:"text2"})
 */
function setElementsValueById(id_value_pairs) {
  for (let [id, value] of Object.entries(id_value_pairs)) {
    const el = document.getElementById(id);
    if (el != null) el.value = value;
  }
}

/**
 * ラジオボックスグループのチェックをすべて解除します。
 * @example uncheckRadioElementsByName("radio1")
 */
function uncheckRadioElementsByName(name) {
        for (let el of document.getElementsByName(name)) {
            el.checked = false;
        }
}