選中/取消選中復選框時更改變量值

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>

你能告訴我這個代碼的問題嗎？

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>

在你的帖子中你有HTML之前的javascript，在這種情況下，HTML應該是第一個，所以javascript可以“找到它”。 或者在我的例子中使用window.onload函數，在頁面加載后運行代碼。

Answer 2

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

Answer 3

嘗試這樣的事情

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

Answer 4

太復雜。 內聯代碼使它很酷。

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

Answer 5

對於那些嘗試過以前的選項並且由於任何原因仍然存在問題的人，你可以使用.prop（）jquery函數：

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

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