-3

フォームに多数のチェック ボックスとラジオ ボタンがあります。チェックボックスをオンにして保存をクリックすると、「プロファイルが更新されました」というメッセージが表示されます。ただし、チェックボックスをオンにせずに保存をクリックすると、「プロファイルが更新されていません」というメッセージが表示されます。たとえば、AGain...「プロフィールを更新しませんでした」というメッセージが表示されるはずです

  1. チェックボックス 1 はオフです。私はそれをチェックして、もう一度チェックを外しました。

  2. チェックボックス 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にオンになっていたかどうかによって異なります。プロパティは、現在チェックされているかどうかに応じてまたはになります。falsecheckedtruefalse

完全な例:ライブコピー| ライブソース

<!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 変数に設定します。

<!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 に答える