Question

我的表单上有很多复选框和单选按钮。如果我选中了任何复选框并单击“保存”，则会显示“您已更新个人资料”的消息。但是，如果我没有勾选任何复选框并点击保存，我会收到一条消息“你还没有更新你的个人资料”。例如，AGain ...我应该收到一条消息“你没有更新你的个人资料”

取消选中Checkbox1。我检查了一下并再次取消选中它。
复选框2已选中。我取消选中它，然后再次检查它。

如果我在上面的两个场景中单击“保存”，我应该收到“NOT updated profile”消息，因为值仍然与以前相同。帮帮我怎么做。

Answer 1

在保存按钮的处理程序中，您可以将复选框的当前值与HTML标记中的原始值进行比较：

var cbchanged = false;
$("selector matching the checkboxes").each(function() {
    if (this.defaultChecked !== this.checked) {
        cbchanged = true;
        return false;
    }
});

defaultChecked属性为true或false，具体取决于复选框是否最初已选中。 checked属性为true或false，具体取决于当前是否。

完整示例：Live Copy | Live Source

<!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <meta charset=utf-8 /> <title>Checkbox Default State</title> </head> <body> <div><label><input type="checkbox" checked>First</label></div> <div><label><input type="checkbox">Second</label></div> <div><label><input type="checkbox" checked>Third</label></div> <div><input id="saveButton" type="button" value="Save"></div> <script> (function() { $("#saveButton").click(function() { var cbchanged = false; $("input[type=checkbox]").each(function() { if (this.defaultChecked !== this.checked) { cbchanged = true; return false; } }); alert(cbchanged ? "You HAVE changed something" : "You have NOT changed something"); }); })(); </script> </body> </html>

Answer 2

javascript版本检查div。（比jQuery快很多）

设置def变量的默认var。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload=function(){
 var d=document,
 changed=false,
 change=function(){
  var c=0,l=cb.length;
  while(l--){if(cb[l].checked!==def[l]){c++}};
  changed=c>0;
 },
 check=function(){
  alert(changed?'something changed':'nothing changed');
  changed=false;
 },
 cb=d.querySelectorAll('input[type=checkbox]'),
 l=cb.length,
 def=[];
 while(l--){def[l]=cb[l].checked};
 d.getElementsByTagName('div')[0].addEventListener('change',change,false);
 d.getElementById('saveButton').addEventListener('click',check,false);
}
</script>
</head>
<body>
<div>
<label><input type="checkbox" checked>First</label>
<label><input type="checkbox">Second</label>
<label><input type="checkbox" checked>Third</label>
<input id="saveButton" type="button" value="Save">
</div>
</body>
</html>

此版本只是检查更改，即使您更改它是一个更改。没有循环，没有多重检查，没有jQuery

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload=function(){
var changed=false,
h=function(){
 changed=true;
},
check=function(){
 alert(changed?'something changed':'nothing changed');
 changed=false;
};
document.getElementsByTagName('div')[0].addEventListener('change',h,false);
document.getElementById('saveButton').addEventListener('click',check,false);
}
</script>
</head>
<body>
<div>
<label><input type="checkbox" checked>First</label>
<label><input type="checkbox">Second</label>
<label><input type="checkbox" checked>Third</label>
<input id="saveButton" type="button" value="Save">
</div>
</body>
</html>

如何检测复选框状态的变化

2 个答案: