如何使用 HTML 和 JavaScript 基于复选框定义变量

我正在尝试生成一个复选框，该复选框将根据复选框是否选中来定义变量x。如果选中该复选框，则变量等于 myvalue，如果未选中该复选框，则变量等于"无值"。如何调整以下代码以获得所需的结果？

<html>
<body>
Checkbox: <input type="checkbox" id="myCheck" value="myvalue"     onclick="myFunction()">
<p>Click the "Try it" button to display the value of the value attribute of the checkbox.</p>
<p id="demo"></p>
<script>
function myFunction() {
    if (x == null){
      var x = "NO value"
    }
    else
    {
      var x = document.getElementById("myCheck").value
    }
    document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>

试试这个：

function myFunction() {
var x = document.getElementById("myCheck").checked;
var  output = document.getElementById("myCheck").value;
if (!x){
  output = "No Value";
}
document.getElementById("demo").innerHTML = output;

}

您必须通过在函数中添加参数"this"来传递元素的上下文。因此，您的点击功能将看起来像 - myFunction(this(。现在，在函数中将此参数作为"element"接收，并在 if 条件中检查此参数 - "！element.checked"。这应该可以修复您的代码。

您可以将代码专门绑定到复选框并测试它是否被选中(或未选中(——然后更新变量 'x' 的值

// get the checkbox and declare the 'x' variable
const myCheck = document.getElementById('myCheck');
let x = 'No Value';
// bind the checkbox to its change event, run some
// code when it changes from checked to un-checked
myCheck.onchange = function(){
   // update the value for 'x'
   // if checked, assign the checkbox's value
   // if not checked, assign 'No Value'
   x = (this.checked)? this.value : 'No Value';
   console.log( x );
};

<label>Checkbox: <input type="checkbox" id="myCheck" value="myvalue"></label>

相关内容

最新更新

热门标签：