-3

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

  1. 复选框 1 未选中。我检查了它并再次取消选中它。

  2. 复选框2 被选中。我取消选中它，然后再次检查它。

如果我在上述两种情况下单击保存，我应该会收到“未更新配置文件”消息，因为值仍然与以前相同。帮助我如何做到这一点。

4

2 回答 2

3

在保存按钮上的处理程序中，您可以将复选框的当前值与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 | 直播源

<!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>
于 2013-07-10T07:00:52.900 回答
0

检查 div 的 javascript 版本。（比 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>
于 2013-07-10T08:13:01.630 回答