Question

我已经尝试了下面的DEMO来设置复选框的值为＆＃34; 0＆＃34;或＆＃34; 1＆＃34;基于checboxes的选择。下面的代码适用于一个复选框，但如果我创建了多个复选框，则它不适用于新复选框。如何使其适用于所有复选框。

HTML：

<input type="checkbox" value="1" />Checkbox
<br/>
<br/>
<span id="result"></span>

JS：

window.onload = function () {
    var input = document.querySelector('input[type=checkbox]');

    function check() {
        if (input.checked) {
            var a = "1";
        } else {
            var a = "0";
        }
        document.getElementById('result').innerHTML = 'result ' + a;
    }
    input.onchange = check;
    check();
}

DEMO

Answer 1

使用此代码：

JavaScript的：

  window.onload = function () {
    var input = document.querySelectorAll('input[type=checkbox]');
   // alert(input);
    function check() {
        if (this.checked) {
            var a = "1";
        } else {
            var a = "0";
        }
        document.getElementById('result').innerHTML = 'result ' + a;
    }
    for(var i = 0; i <= input.length; i++){
        if(input[i]) input[i].onchange = check;
    }

    check();
}

HTML：

<input type="checkbox" value="1" />Checkbox<br/>
<input type="checkbox" value="1" />Checkbox<br/>

<input type="checkbox" value="1" />Checkbox<br/>

<br/>
<span id="result"></span>

JSFiddle Demo

Answer 2

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<body>

<input type="checkbox" id="checkbox1"/>

<input type="checkbox" id="checkbox2"/>

<input type="checkbox" id="checkbox3"/>
</body>
</html>


<script type="text/javascript">

$('#checkbox1').change(function() 
{
        if($(this).is(":checked")) 
        {
            alert("checked-1");
        }
        else
        {
            alert("unchecked-1");    
        }
});

$('#checkbox2').change(function() 
{
        if($(this).is(":checked")) 
        {
            alert("checked-2");
        }
        else
        {
            alert("unchecked-2");    
        }
});

$('#checkbox3').change(function() 
{
        if($(this).is(":checked")) 
        {
            alert("checked-3");
        }
        else
        {
            alert("unchecked-3");    
        }
});
</script>

Answer 3

如果你想要纯粹的JS，试试这个：

window.onload = function () {
    var chks = document.querySelectorAll('input[type=checkbox]'); //<-- get all checkboxes
    var l = chks.length;
    while (l--) {
        chks[l].onchange = count;
    }
};

var count = function () {
    var chks = document.querySelectorAll('input[type=checkbox]'); //<-- get all checkboxes
    var l = chks.length,
        cnt = 0;
    while (l--) {
        if (chks[l].checked) {
            chks[l].value = '1';
            cnt++;
        } else {
            chks[l].value = '0';
        }
    }
    document.querySelector('#result').innerHTML = cnt;
};

表单数据无法正确捕获

3 个答案: