エンジニアのひよこ_level10

【毎日更新!】新卒4年目エンジニアブログです!

【JavaScript】複数のcheckboxで、一つでもチェックされたら要素を表示する【886日目】

1個でもチェックされたら表示したい

チェックボックスがチェックされたときに、何かを表示したい。
ではなく、どれか一個だけでもチェックされたら表示をしたい。

例えば共通の内容があって、片方がチェックされたら表示させたい。

サンプルコード

<input type="checkbox" class="check_item" onchange="anyOneCheckedShow('.check_item', '.show_item')">
<input type="checkbox" class="check_item" onchange="anyOneCheckedShow('.check_item', '.show_item')">

<div class="hidden show_item">見せたい要素</div>
function anyOneCheckedShow(check_target_selector, show_target_selector) {
    // チェックされている要素を配列に入れる
    var checkedList = [];
    $(check_target_selector).each((index, element) => {
        checkedList.push(element.checked);
    });

    // 1つでもチェックされていれば表示
    if (checkedList.indexOf(true) >= 0) {
        $(show_target_selector).show();
    } else {
        $(show_target_selector).hide();
    }
}
  1. チェックがされたら関数を動かす
  2. チェック対象と、表示対象のセレクタを引数に渡す
  3. チェックされている要素を探す
  4. チェックが一つでもされていたら表示

この流れ。

引数がセレクタなので、関数を動かすタイミングを任意に変える事もできます。

もっといいコードとかアドバイスありましたら、是非お願いいたしますφ(・