@johnsonaokiposted at 2021-06-22

orの使い方

Q&A

JavaScript checkbox if文 or getElementById

解決したいこと

チェックボックスの五個のうち、そのいずれかが選択されて場合、式を実行するということを実現できません。
解決方法を教えてください

該当するソースコード

          <label><input type="checkbox" id="apple" value="1">apple</label></br>
          <label><input type="checkbox" id="lemon" value="2">lemon</label></br>
          <label><input type="checkbox" id="banana" value="3">banana</label></br>
          <label><input type="checkbox" id="orange" value="4">orange </label></br>
          <label><input type="checkbox" id="cherry" value="5">cherry</label></br>

    var a = document.getElementById('apple');
    var b = document.getElementById('lemon');
    var c = document.getElementById('banana');
    var d = document.getElementById('orange');
    var e = document.getElementById('cherry');

if((a||b||c||d||e).checked){
    条件式
}

自分で試したこと

三つまでなら問題ありませんでした。四つ以上だと何か問題が発生するんでしょうか。

4Answer

@itagagaki posted at 2021-06-22

(a||b||c||d||e).checked

根本的に間違っています。
(a||b||c||d||e)を評価した結果が何になるのかを考えてください。

正しい式は

a.checked || b.checked || c.checked || d.checked || e.checked

となります。

0Like

Comments

@johnsonaoki
Questioner
ご指摘ありがとうございます。
修正すると、無事作動しました。
評価した後はwindow.open("fruit.html")でファイルを開く予定でした。

@github0013@github posted at 2021-06-23

更に言うと配列に入れてどれか一つでも一致するものがあるかどうかをチェックすれば、簡単かも？

[
  a.checked,
  b.checked,
  c.checked,
  d.checked,
  e.checked
].some((x) => x == true);

// または
// [a.checked, b.checked, c.checked, d.checked, e.checked].some(Boolean)

0Like

Comments

@johnsonaoki
Questioner
ありがとうございます。
コードの見た目がよくなりました
今後は[]をうまく使って作業していこうと思います。

@7324i posted at 2021-06-23

高階関数アリならreduceでもいいですね。

[a, b, c, d, e].reduce((acc, cur) => acc || cur.checked, false)

個人的には、

    var a = document.getElementById('apple');
    var b = document.getElementById('lemon');
    var c = document.getElementById('banana');
    var d = document.getElementById('orange');
    var e = document.getElementById('cherry');

上記の各要素の変数代入は省いた上で、

if(document.querySelectorAll('input[type=checkbox]:checked').length !== 0) {
  // 未チェック時処理
}

としたいかな、と思います。
こうすれば、仮にチェックボックスの要素数を増減させたとしても、それに合わせて判別コード側を修正する手間が省けますので。

0Like

@7324ii posted at 2021-06-23

if(document.querySelectorAll('input[type=checkbox]:checked').length !== 0) {
  // 未チェック時処理
}

未チェック時ではなく1つでもチェックされている場合の間違いです。

0Like

Are you sure you want to delete the question?

orの使い方

解決したいこと

該当するソースコード

自分で試したこと

4Answer

Comments

Comments

Your answer might help someone💌