单击复选框显示文本

Question

我想用复选框写两个名称，并希望在console.log中显示文本，并检查java脚本中的复选框。我试过这个，但它不起作用

<p>Pakistan <input type="checkbox" id="mycheck" onclick="myFunction()"></p>
<p>India <input type="checkbox1" id="mycheck" onclick="myFunction"></p>
<script>
  function myFunction() {
    var checkbox = document.getElementById("mycheck")
    if (checkBox.checked == true) {
      console.log("Pakistan")
    }
  }
</script>

Answer 1

你的checkbox.check有一个大写字母b，而你的声明有小写字母

  <p>Pakistan  <input type="checkbox" id="mycheck" onclick="myFunction()"></p>
  <p>India  <input type="checkbox1" id="mycheck" onclick="myFunction"></p>
      <script>
  function myFunction(){
  var checkbox = document.getElementById("mycheck")
  if (checkbox.checked == true){
    console.log("Pakistan")
  }
}
  </script>

Answer 2

最好的方法是将this添加到你的onclick函数中，该函数将引用clicked元素的复选框。然后，您可以检查是否选中了复选框并打印出父元素的文本以获取“复选框名称”

还要确保你有type = "checkbox"而不是checkbox1，这不是一个正确的类型。您还希望避免重复的ID，将id="mycheck"更改为类或以不同方式命名它们。

工作片段：

<p>Pakistan <input type="checkbox" id="mycheck1" onclick="myFunction(this)"></p>
<p>India <input type="checkbox" id="mycheck2" onclick="myFunction(this)"></p>
<script>
  function myFunction(box) {
    if (box.checked == true) {
      console.log(box.parentElement.textContent)
    }
  }
</script>

Answer 3

首先，ID是唯一的，所以将this传递给函数并检查它是否被检查 - 然后console.log父文本中的文本：

function myFunction(checkbox) {
  if (checkbox.checked) {
    console.log(checkbox.parentNode.textContent);
  }
}

<p>Pakistan <input type="checkbox" onclick="myFunction(this)"></p>
<p>India <input type="checkbox" onclick="myFunction(this)"></p>

Answer 4

function myFunction(chbx) {
    if(chbx.checked == true) {
        console.log(chbx.parentElement.textContent);
    }
}

<p>Pakistan <input type="checkbox" onclick="myFunction(this)"></p>
<p>India <input type="checkbox" onclick="myFunction(this)"></p>