

理想として１がチェックされたら、コンソールログに「１がチェックされました。」  
１と３がチェックされたら、コンソールログに「１と３がチェックされました。」  
１と２と３がチェックされたら、コンソールログに「１と２と３がチェックされました。」みたいに、チェック判定の処理を行いたいです。

例として１，２，３をあげましたが、これが１～８まであります。  
コードを短くしたいのですが、分かる方教えて頂きたいです！

[code]

    function sample1(checked) {
      if (checked) {} else {}
    }
    
    function sample2(checked) {
      if (checked) {} else {}
    }
    
    function sample3(checked) {
      if (checked) {} else {}
    }
[/code]

[code]

    <div>
      <label><input type="checkbox" onchange="sample1(this.checked)">1</label>
    </div>
    <div>
      <label><input type="checkbox" onchange="sample2(this.checked)">2</label>
    </div>
    <div>
      <label><input type="checkbox" onchange="sample3(this.checked)">3</label>
    </div>
[/code]


CC BY-SA 4.0
2020-10-03T14:32:26.583
70902
2020-10-04T02:46:11.627
2020-10-04T01:59:18.357
32986
42169
question
javascript
複数のチェックボックスで、何がチェックされているか判定を行いたい


ご質問のサンプルで`onChange`イベントの引数に`checked`プロパティを指定しているので、CheckBox自体を指定するよう書き換えると良いと思います。

`onchange="sample1(this.checked)"` → `onchange="sample(this)"`

それはそれとして、今回の目的はHTMLのすべてのチェックボックスから(※1)選択されているチェックボックスを抜き出し、(※2)親要素の`label`のテキストを「～と～が」のように結合(※3)することです。

コードを短くする用途に限らず、クエリ(※1)やフィルター(※2)、マップ、ジョイン(※3)などの手法はよく使われます。  
参考になればどうぞ。

[code]

    function sample(checkbox){
        // チェックされたコントロールのチェック状況を調べる
        if(!checkbox.checked) return;
    
        // 複数のチェックボックスで何がチェックされているかを判定する(※1～※3の処理)
        // HTMLのすべてのチェックボックスから
        let checks = document.querySelectorAll("input[type='checkbox']");
        // 選択されているチェックボックスを抜き出し、
        let filtered = [].slice.call(checks).filter(c => c.checked);
        // 親要素の`label`のテキストを「～と～が」のように結合
        let s = filtered.map(c => c.parentElement.textContent).join('と');
        console.log(s + 'がチェックされました。');
    }
[/code]

[code]

    <div>
    <label><input type="checkbox" name="check1"
    onchange="sample(this)">1</label>
    </div>
    <div>
    <label><input type="checkbox" name="check2"
    onchange="sample(this)">2</label>
    </div>
    <div>
    <label><input type="checkbox" name="check3"
    onchange="sample(this)">3</label>
    </div>
[/code]


CC BY-SA 4.0
2020-10-04T01:15:16.687
70903
2020-10-04T02:46:11.627
2020-10-04T02:46:11.627
9820
9820
70902
answer