2013-07-10 5 views
-3

У меня есть много флажков и переключателей на моей форме. Если я проверил любой флажок и нажимаю «Сохранить», я получаю сообщение «вы обновили свой профиль». Однако, если я не проверю флажок и не нажмем на сохранение, я должен получить сообщение «Вы НЕ обновили свой профиль». например, AGain ... Я должен получить сообщение «Вы НЕ обновили свой профиль»Как определить изменение состояния флажка

  1. Checkbox1 не установлен. Я проверил его и снова снял.

  2. checkbox2 проверен. Я сними его и снова проверил.

Если я нажму на сохранение выше двух сценариев, я должен получить сообщение «НЕ обновленный профиль», так как значения все те же, что и раньше. Помогите мне, как это сделать.

+3

если возможно, поделитесь своим HTML, пожалуйста? –

+0

Как раз перед запуском вашего заявления о обновлении SQL сравните все значения, которые необходимо обновить, если все значения равны, измените сообщение;) – Pouki

+0

Возможный дубликат [определение изменения состояния флажка] (http://stackoverflow.com/questions/7919716/обнаруживает-флажок-состояние изменить) – Peter

ответ

3

В обработчике на кнопке сохранения, вы можете сравнить текущее значение флажков с их оригинального значения из HTML-разметки:

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

Свойство defaultChecked является true или false в зависимости от того, checkbox was original проверено. Недвижимость 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> 
0

Javascript версия проверки DIV. (Гораздо быстрее, чем JQuery)

устанавливает вар по умолчанию в переменной опр.

<!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> 
Смежные вопросы