表单数据没有正确捕获

我尝试了下面的演示，根据checboxes的选择将复选框的值设置为“0”或“1”。下面的代码适用于一个复选框，但如果我创建了多个复选框，它不适用于新复选框。如何使它适用于所有复选框。表单数据没有正确捕获

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

来源

2014-08-30 anandbooklet S

是JQuery的选项吗？这会使这个任务变得微不足道，我想... – therealrootuser 2014-08-30 04:36:11

@anandbookletS，你允许/熟悉JQuery吗？ – Arvind 2014-08-30 04:46:32

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

来源

2014-08-30 04:47:01

当你检查事件是火和检查复选框被选中或没有，我在那里显示警报，在那里你可以根据你的要求编码 – 2014-08-30 04:48:17

嗨帕雷什。谢谢。上面的代码是我正在寻找的。我想为选中的复选框设置值。例如，如果我选择checkbox1，checkbox1的值应该设置为“1”，否则为“0”。您能否帮助重写代码以取代警报？ – 2014-08-30 06:54:26

将此行置于警告document.querySelector（'＃result'）。innerHTML =“1”;和其他部分是document.querySelector（'＃结果'）。innerHTML =“0”为每个条件，请投票，如果我帮你 – 2014-08-30 07:06:36

使用此代码：

的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

来源

2014-08-30 04:42:59 Omidam81

如果你想纯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; 
};

来源

2014-08-30 05:17:07 Arvind

Here is [fiddle]（http://jsfiddle.net/kcg6Lagx/） – Arvind 2014-08-30 05:17:25

表单数据没有正确捕获

回答

相关问题