Considere solo las casillas de verificación modificadas en jquery
Frecuentes
Visto 199 veces
2
I have a few checkboxes (some already checked through html checked attribute) on a page and a submit button. I wanna use jquery to run a function using the $.each() loop such that it performs the function if the checkbox is checked, but only if it wasn't already checked. Also, I want to perform a function for each un checked check box, but only if it was already Checked.
Por favor, ayuda
3 Respuestas
5
Una forma de hacer esto es usar .data()
to store the original value of the checkbox.
$(document).ready(function(){
$("input[type='checkbox']").each(function(){
$(this).data("originalValue", $(this).is(":checked"));
})
});;
$("#ok").click(function(){
$("input[type='checkbox']").each(function(){
var edited = $(this).data("originalValue") !== $(this).is(":checked");
if (edited)
{
var checkboxLabel = $(this).next("label");
alert("edited: " + checkboxLabel.text());
}
});
});
Original solution that checks for user interaction rather than change: http://jsfiddle.net/8g3uz/1/
Respondido 26 ago 12, 23:08
1
To react to only those checkboxes being checked that weren't originally checked, Sugiero:
$('#check').click(
function(e){
e.preventDefault();
var checkboxes = $('input:checkbox:checked');
checkboxes.each(
function(i){
if (this.defaultChecked == false) {
// do something, it wasn't checked on page-load, eg:
alert("This is a checkbox that wasn't originally checked.");
}
});
});
To do something if the state has changed from the default, which seems to be the basis of your question:
$('#check').click(
function(e){
e.preventDefault();
var checkboxes = $('input:checkbox');
checkboxes.each(
function(){
if (this.defaultChecked !== this.checked) {
$(this).prev('label').addClass('changedFromDefault');
}
});
});
Usando el siguiente HTML:
<span>
<label for="one">one</label><input id="one" type="checkbox" checked />
</span>
<span>
<label for="two">two</label><input id="two" type="checkbox" />
</span>
<span>
<label for="three">three</label><input id="three" type="checkbox" />
</span>
<button id="check">Check</button>
This jQuery should show how to identify those elements that are changed, or unchanged, more easily:
$('#check').click(
function(e){
e.preventDefault();
var checkboxes = $('input:checkbox');
checkboxes.each(
function(){
if (this.defaultChecked !== this.checked) {
$(this)
.closest('span')
.removeClass('unchanged')
.addClass('changedFromDefault');
}
else {
$(this)
.closest('span')
.removeClass('changedFromDefault')
.addClass('unchanged');
}
});
});
Referencias:
Respondido 26 ago 12, 23:08
0
Here is a selector for the first case:
$("input[type='checkbox']:not([checked]):checked");
Here is a selector for the second case:
$("input[type='checkbox'][checked]:not(:checked)");
Respondido 26 ago 12, 23:08
No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas jquery checkbox each or haz tu propia pregunta.
Thanks a ton. another question, is it better to add the data using php or jquery? - Pranay Prakash
I'd keep it all in Javascript, since that's where you run the handler code for the checkboxes. If you need to know if the checkbox values have changed in your PHP code you could probably compare them with the model you've used for setting the checkboxes as checked/unchecked when you constructed the html. - matt zeunert