表单数据未正确捕获
Form Data not capturing correctly
我尝试了下面的DEMO,根据复选框的选择将复选框的值设置为"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();
}
演示
<!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>
使用以下代码:
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演示
如果你想要纯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;
};
相关文章:
- 如何从pdftron webviewer获取表单数据
- JS验证ajax返回的html中的表单数据
- JS表单提交"无法使用Chrome数据保护程序加载此页面.尝试重新加载页面.调试信息:POST CISmtuK
- 将单击事件添加到数据表
- 预览数据表单
- Ajax数据表单序列化防止双重提交
- 如何在 Spring Framework 中处理表数据表单提交
- 发布大型数据表单 Angular JS
- 覆盖Magento中的默认数据表单提交JS活动
- 保存不带按钮的数据表单
- 更新Highchart数据表单导出按钮
- 将数据表单转换为PDF
- 我的Angular视图没有用数据表单服务器更新
- 如何在不重新加载页面的情况下获取数据表单数据库
- JavaScript SDK返回数据表单嵌套函数
- 使用php AJAX发送数据表单请求失败
- 数据表单$scope在Angular的view (page)中不显示
- 实时交换 HTML 数据表单
- 搜索parse.com数据表单html输入
- 如何在MVC中返回JSON数据表单控制器到jsp