Considere solo las casillas de verificación modificadas en jquery

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

preguntado el 26 de agosto de 12 a las 23:08

3 Respuestas

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());
       }
    });
});

http://jsfiddle.net/8g3uz/3/

Original solution that checks for user interaction rather than change: http://jsfiddle.net/8g3uz/1/

Respondido 26 ago 12, 23:08

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

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.");
                }
            });
    });​

Demostración de JS Fiddle.

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');
                }
            });
    });​

Demostración de JS Fiddle.

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');
                }
            });
    });​

Demostración de JS Fiddle.

Referencias:

Respondido 26 ago 12, 23:08

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)");

DEMO: http://jsfiddle.net/fascw/

Respondido 26 ago 12, 23:08

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.