javascript - 如何多次调用 Javascript 函数

Question

每次选中复选框时，我都想调用这个 Javascript 函数，所以，我将 onclick=myFunction() 放在 input 标签中。但是，当我使用该页面时，我只能在第一个复选框处调用一次 myFunction()。所以，在我的网站上，它有大约 400-500 个与示例相同的问题

我的目标是创建测验网站，在我通过选中复选框回答问题后可以显示答案。

P.S 我是 HTML 和 javascript 的新手，如果你有更好的想法，请建议我

function myFunction() {
  var checkBox = document.getElementById("myCheck");
  var text = document.getElementById("text");
  if (checkBox.checked == true) {
    text.style.display = "block";
  } else {
    text.style.display = "none";
  }
}

   

<div class="cssExTopic" >Question Number 1 :  
    <ul><li>This is Question Topic</li></ul></div>
    <div class="cssExChoice">
      <ul>
        <li><input type="checkbox" id="myCheck" onclick="myFunction()"> 1 : CD-ROM</li>
        <li><input type="checkbox" id="myCheck" onclick="myFunction()"> 2 : HARD DISK</li>
        <li><input type="checkbox" id="myCheck" onclick="myFunction()"> 3 : SDRAM</li>
        <li><input type="checkbox" id="myCheck" onclick="myFunction()"> 4 : REGISTER</li>
        <li>Answer
          <font id="text" style="display: none;">: 4</font>
        </li>
      </ul>
    </div>

Answer 1

您可以通过以下方式编辑您的函数以适用于每个复选框。通过将 onclick 方法更改为 onclick="myFunction(this)，您将传递触发 onclick 的元素。

function myFunction(checkBox) {
  var text = document.getElementById("text");
  if (checkBox.checked == true) {
    text.style.display = "block";
  } else {
    text.style.display = "none";
  }
}

<div class="cssExChoice">
  <ul>
    <li><input type="checkbox" id="myCheck1" onclick="myFunction(this)"> 1 : CD-ROM</li>
    <li><input type="checkbox" id="myCheck2" onclick="myFunction(this)"> 2 : HARD DISK</li>
    <li><input type="checkbox" id="myCheck3" onclick="myFunction(this)"> 3 : SDRAM</li>
    <li><input type="checkbox" id="myCheck4" onclick="myFunction(this)"> 4 : REGISTER</li>
    <li>Answer
      <font id="text" style="display: none;">: 4</font>
    </li>
  </ul>
</div>

如果您想更好地理解什么是 this 以及如何使用它，这里有一些额外的资源:

• > https://www.w3schools.com/js/js_this.asp
• > https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

编辑

要使这项工作适用于多个问题，您需要进行以下更改:

function myFunction(checkBox, question) {
  var text = document.getElementById("text" + question);
  console.log(question);
  if (checkBox.checked == true) {
    text.style.display = "block";
  } else {
    text.style.display = "none";
  }
}

<div class="cssExChoice">
  <ul>
    <li><input type="checkbox" id="myCheck1" onclick="myFunction(this, 1)"> 1 : CD-ROM</li>
    <li><input type="checkbox" id="myCheck2" onclick="myFunction(this, 1)"> 2 : HARD DISK</li>
    <li><input type="checkbox" id="myCheck3" onclick="myFunction(this, 1)"> 3 : SDRAM</li>
    <li><input type="checkbox" id="myCheck4" onclick="myFunction(this, 1)"> 4 : REGISTER</li>
    <li>Answer
      <font id="text1" style="display: none;">: 4</font>
    </li>
  </ul>
</div>

<div class="cssExChoice">
  <ul>
    <li><input type="checkbox" id="myCheck1" onclick="myFunction(this, 2)"> 1 : CD-ROM</li>
    <li><input type="checkbox" id="myCheck2" onclick="myFunction(this, 2)"> 2 : HARD DISK</li>
    <li><input type="checkbox" id="myCheck3" onclick="myFunction(this, 2)"> 3 : SDRAM</li>
    <li><input type="checkbox" id="myCheck4" onclick="myFunction(this, 2)"> 4 : REGISTER</li>
    <li>Answer
      <font id="text2" style="display: none;">: 2</font>
    </li>
  </ul>
</div>