jQuery > on checkbox change run code

Question

I have rows of "To Do" on a checklist, each row has a "Completed" checkbox. Upon clicking the box with the mouse, the following code runs and correctly posts the information (updates the database to track that the task has been completed):

   $(function ()
 {
     $('[id*="howto_step_complete"]').mousedown(function ()
     {
         var id = $(this).attr('id');
         var howto_used_id = id.substr(id.length - 2);

         var howto_step_minutes = $('#howto_step_minutes' + howto_used_id).val();

         if (!$(this).is(':checked'))
         {
             var checked = true;
         }
         else
         {
             var checked = false;
         }
         var value = $('#howto_used_id').val();
         if (howto_step_minutes != '')
         {
             $.post("updateChecklist.php",
             {
                 howto_used_id: howto_used_id,
                 howto_step_complete: checked,
                 howto_step_minutes: howto_step_minutes
             },

             function (data)
             {
                 var obj = jQuery.parseJSON(data);
                 var howto_used_id_returned = obj.howto_used_id;
                 var howto_step_complete = obj.howto_step_complete;
                 alert(howto_step_complete);
             });
             $(this).trigger("change");
         }
         else
         {
             alert('Minutes must be filled out before checking complete');
         }
     });

 });

The problem is, if a person uses tabs to move around the form and then uses the spacebar to check the box instead, this isn't triggered, as it's using mousedown. I tried changing this to change() instead but then my alert box keeps coming up over and over again with "false".

It should be true since I've just checked the box and I don't understand why it continually comes up.

What can I use instead of mousedown() to get this code to post properly?

in change(), you can check if the checkbox is checked or not. If it is checked, let the code run. Try not using mousedown — Asdfg, Sep 26 '12 at 03:50

score 1 · Accepted Answer · answered Sep 26 '12 at 04:00

I changed it to use the change() again and then removed the trigger, I think that was what was constantly popping the alert box and then changing it again, and looping.

$(function(){
        $('[id*="howto_step_complete"]').change(function() {
        var id = $(this).attr('id');
        var howto_used_id = id.substr(id.length - 2);

        var howto_step_minutes = $('#howto_step_minutes' + howto_used_id).val();

        if (!$(this).is(':checked')) { var checked = false; }else{ var checked = true; }
            var value = $('#howto_used_id').val();
            if(howto_step_minutes!=''){
             $.post("updateChecklist.php", { howto_used_id: howto_used_id, howto_step_complete: checked, howto_step_minutes: howto_step_minutes },
                        function(data) {
                        var obj = jQuery.parseJSON(data);
                           var howto_used_id_returned = obj.howto_used_id;
                        var howto_step_complete = obj.howto_step_complete;
                        alert(howto_step_complete);
                   });
            }else{ alert('Minutes must be filled out before checking complete'); }
        });

});

I also had the true/false of var checked wrong/reversed. Fixed that as well.

I can't accept my own answer for another 14 hours. I am selecting my own as it contains a complete solution. Merely changing it to .change() as you mentioned didn't work as I had mentioned I already tried that and had the issue of the repeating alert boxes. My answer contains the full solution with reversing the vars and removing the trigger. — Scott Rowley, Sep 27 '12 at 13:32

score 0 · Answer 2 · answered Sep 26 '12 at 03:51

0

Try .change instead of .mousedown:

http://nelsonwells.net/2010/06/jquery-change-event-on-checkbox/

answered Sep 26 '12 at 03:51

abellina

1,016
1
11
27

Use `.on('change')` so that it will always happen on the event. I have more success that way. – Mic1780 Sep 26 '12 at 03:58
Why the downvote? See this stackoverflow question: http://stackoverflow.com/questions/4471401/getting-value-of-html-checkbox-from-onclick-onchange-events – abellina Sep 26 '12 at 04:03

jQuery > on checkbox change run code

2 Answers2