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
– Asdfg, Commented Sep 26, 2012 at 3:50

Scott Rowley · Accepted Answer · 2012-09-26 04:00:16Z

1

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.

answered Sep 26, 2012 at 4:00

Scott Rowley

4841 gold badge8 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Scott Rowley Over a year ago

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.

abellina · Accepted Answer · 2012-09-26 03:51:09Z

0

Try .change instead of .mousedown:

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

answered Sep 26, 2012 at 3:51

abellina

1,0161 gold badge12 silver badges27 bronze badges

2 Comments

Mic1780 Over a year ago

Use .on('change') so that it will always happen on the event. I have more success that way.

abellina Over a year ago

Why the downvote? See this stackoverflow question: stackoverflow.com/questions/4471401/…

Collectives™ on Stack Overflow

jQuery > on checkbox change run code

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related