当复选框被选中/取消选中时更改变量值

Question

我试图根据复选框的状态更改变量的值，以下是我的代码示例：

<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>

请问这段代码有什么问题。

- user2533777

Answer 1

试试这个：

if (document.querySelector('input[type=checkbox]').checked) {

演示在这里

代码建议：

<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>

在你的帖子中，JavaScript位于HTML之前，此时应该先放HTML，以便JavaScript可以“找到它”。或者像我的例子一样使用window.onload函数，在页面加载后运行代码。

- Sergio

---

它是有效的，但如何使它在页面加载时显示“结果未检查”？ - user2533777

@Subhanker，我更新了我的回答。我新建了一个函数，并在底部添加了一个调用 check(); 的操作。 - Sergio

现在勾选/取消复选框时没有任何效果，请检查。 - user2533777

这里的变量a是局部变量，是否有办法修改全局变量？ - user2533777

Answer 2

            $('#myForm').on('change', 'input[type=checkbox]', function() {
                this.checked ? this.value = 'apple' : this.value = 'pineapple';
            });

- Everton Z. P.

Answer 3

太复杂了。内联代码使它更酷。

<input type="checkbox" onclick="yourBooleanVariable=!yourBooleanVariable;">

- MiKL

Answer 4

对于那些尝试了之前的选项，但由于任何原因仍然存在问题的人，您可以使用.prop() jQuery函数来解决：

$(document.body).on('change','input[type=checkbox]',function(){
    if ($(this).prop('checked') == 1){
        alert('checked');
    }else{
        alert('unchecked');
}

- Yazid Erman

Answer 5

尝试像这样做：

<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>

- rajesh kakawat

---

@Subhanker，它正在正常工作，请正确地复制粘贴并使用。 - rajesh kakawat

Answer 6

这段代码只会运行一次并检查初始复选框状态。您需要为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;
    }
}

- Elon Than