javascript 选中/取消选中复选框时更改变量值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19403632/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change variable value when checkbox is checked/unchecked
提问by Sergio
I was trying to change the value of an variable according to the status of an checkbox here is my code sample
我试图根据复选框的状态更改变量的值，这是我的代码示例
<script type="text/javascript">
if(document.getElementByType('checkbox').checked)
{
var a="checked";}
else{
var a="not checked";}
document.getElementById('result').innerHTML ='result '+a;
</script>
<input type="checkbox" value="1"/>Checkbox<br/>
<br/>
<span id="result"></span>
Can you please tell me whats the problem with this code.
你能告诉我这段代码有什么问题吗？
回答by Sergio
Try this:
试试这个：
if (document.querySelector('input[type=checkbox]').checked) {
Demo here
演示在这里
Code suggestion:
代码建议：
<input type="checkbox" />Checkbox<br/>
<span id="result"></span>
<script type="text/javascript">
window.onload = function () {
var input = document.querySelector('input[type=checkbox]');
function check() {
var a = input.checked ? "checked" : "not checked";
document.getElementById('result').innerHTML = 'result ' + a;
}
input.onchange = check;
check();
}
</script>
In your post you have the javascript before the HTML, in this case the HTML should be first so the javascript can "find it". OR use, like in my example a window.onloadfunction, to run the code after the page loaded.
在您的帖子中，您在 HTML 之前有 javascript，在这种情况下，HTML 应该是第一个，以便 javascript 可以“找到它”。或者使用，就像我的例子中的一个window.onload函数，在页面加载后运行代码。
回答by Everton Z. P.
$('#myForm').on('change', 'input[type=checkbox]', function() {
this.checked ? this.value = 'apple' : this.value = 'pineapple';
});
回答by MiKL
Too complicated. Inline code makes it cool.
太复杂。内联代码让它变得很酷。
<input type="checkbox" onclick="yourBooleanVariable=!yourBooleanVariable;">
回答by Yazid Erman
For those who tried the previous options and still have a problem for any reason, you may go this way using the .prop() jquery function:
对于那些尝试了以前的选项但由于任何原因仍然有问题的人，您可以使用 .prop() jquery 函数这样做：
$(document.body).on('change','input[type=checkbox]',function(){
if ($(this).prop('checked') == 1){
alert('checked');
}else{
alert('unchecked');
}
回答by rajesh kakawat
try something like this
尝试这样的事情
<script type="text/javascript">
function update_value(chk_bx){
if(chk_bx.checked)
{
var a="checked";}
else{
var a="not checked";
}
document.getElementById('result').innerHTML ='result '+a;
}
</script>
<input type="checkbox" value="1" onchange="update_value(this);"/>Checkbox<br/>
<span id="result"></span>
回答by Elon Than
This code will run only once and check initial checkbox state. You have to add event listener for onchangeevent.
此代码将只运行一次并检查初始复选框状态。您必须为onchange事件添加事件侦听器。
window.onload = function() {
document.getElementByType('checkbox').onchange = function() {
if(document.getElementByType('checkbox').checked) {
var a="checked";
} else {
var a="not checked";
}
document.getElementById('result').innerHTML ='result '+a;
}
}
