表單數據沒有正確捕獲

我嘗試了下面的演示，根據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

表單數據沒有正確捕獲

回答

相關問題