【解決方法】HTML と JS でクリックするとアラートを生成するチェックボックスを作成するにはどうすればよいですか

[ad_1]

その中にチェックボックスを含むモーダルがあります。

私は表示しようとしています:
– チェックボックス 1 がチェックされると、「番号 1 がチェックされました」というアラートが表示されます。
– チェックボックス 2 がチェックされたときのアラート。「番号 2 がチェックされています」と表示されます。
– 両方がチェックされている場合、「番号 1 と 2 がチェックされています」というアラート。

ただし、チェックボックスをオンにすると、上記の手順に従ってアラートが表示されません…

私が試したこと：

これはHTML…

<pre lang="HTML"><pre><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Open Modal
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="myModalLabel">Modal Title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
         <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="allCheckbox" onchange="checkAll()">
      <label class="form-check-label" for="allCheckbox">
        All
      </label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="number1Checkbox">
      <label class="form-check-label" for="number1Checkbox">
        Number 1
      </label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="number2Checkbox">
      <label class="form-check-label" for="number2Checkbox">
        Number 2
      </label>
    </div>
  </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

これはJSです：

function checkAll() {
    var all = document.getElementById("allCheckbox");
    var number1 = document.getElementById("number1Checkbox");
    var number2 = document.getElementById("number2Checkbox");
    if (all.checked) {
      number1.checked = true;
      number2.checked = true;
    } else {
      number1.checked = false;
      number2.checked = false;
    }
  }
  
  function checkNumber1() {
    var number1 = document.getElementById("number1Checkbox");
    var number2 = document.getElementById("number2Checkbox");
    if (number1.checked) {
      alert("Number 1 is checked");
    }
    if (number1.checked && number2.checked) {
      alert("Number 1 and 2 are checked");
    }
  }

  function checkNumber2() {
    var number1 = document.getElementById("number1Checkbox");
    var number2 = document.getElementById("number2Checkbox");
    if (number2.checked) {
      alert("Number 2 is checked");
    }
    if (number1.checked && number2.checked) {
      alert("Number 1 and 2 are checked");
    }
  }

解決策 1

あなたはあなたを呼ぶものを何も持っていません checkNumber1 また checkNumber2 機能。 Javascript 関数は魔法のように自分自身を呼び出しません!

次のようなことを試してください：

HTML

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="allCheckbox">
  <label class="form-check-label" for="allCheckbox">
    All
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="number1Checkbox">
  <label class="form-check-label" for="number1Checkbox">
    Number 1
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="number2Checkbox">
  <label class="form-check-label" for="number2Checkbox">
    Number 2
  </label>
</div>

JavaScript

document.addEventListener("DOMContentLoaded", () => {
    const all = document.getElementById("allCheckbox");
    const number1 = document.getElementById("number1Checkbox");
    const number2 = document.getElementById("number2Checkbox");
    
    const showChecked = () => {
        if (number1.checked && number2.checked) {
            alert("Numbers 1 and 2 are checked.");
        } else if (number1.checked) {
            alert("Number 1 checked.");
        } else if (number2.checked) {
            alert("Number 2 checked.");
        }
    };
    
    number1.addEventListener("change", showChecked);
    number2.addEventListener("change", showChecked);
    
    all.addEventListener("change", () => {
        number1.checked = all.checked;
        number2.checked = all.checked;
        showChecked();
    });
});