Error in checking checkbox value using jQuery

Question

Well..the title may seem very ambiguous but the problem is kinda new for me.

I have a checkbox which is set n times using a loop (in php).

<input class="shiftt_class" type="checkbox" name="multiSelect[]" value="">

and it is set like this.

<?php foreach($depts['shifts'] as $shfts){?>
   <span>
     <input class="shiftt_class" type="checkbox" name="multiSelect[]" value="<?php echo $shfts['shift_id'];?>">

     <select name="nottime<?php echo $shfts['shift_id']; ?>" class="notification_time_class">
        <option value="">Set Time</option>                     
        <option value="11:00" >11:00</option>                               
        <option value="12:00" >12:00</option>                     
        <option value="13:00">13:00</option>                           
      </select>                      
  </span>
<?php }?>

And on a button click, I'm tryna set the checkboxes selected based on a JSON response I'm getting using jQuery.

My JSON response:

[{"shift_id":"2"},{"shift_id":"3"}]

jQuery code:

if shifts is my JSON response, then

           if(shifts.length>0)
           {
             $.each(shifts,function(index,shift) 
             {
                    if($(".shiftt_class").val()==shift.shift_id)
                    {
                        alert('ddd');
                        $(".shiftt_class").prop("checked", true);                           
                    }
              });//end of each function

            }

I get the alert working, but the check-boxes are not set. I gotta try the same method to set the select-box as well. Where did I go wrong?

UPDATE: My jQuery function

        $.ajax({
             url: post_url,
             data:{staff_id : staff_id,csrf_test_name : csrf_token},
             type: "POST",
             dataType: 'json',
             beforeSend: function ( xhr ) {
             //Add your image loader here
             $('#select_loader').show(); // Ajax Loader Show
             },
             success: function(shifts) 
            { 
                 $('#select_loader').hide();

                $.each(shifts, function (index, shift) {$('.shiftt_class[value="' + shift.shift_id + '"]').prop("checked", true);
}); 
            }
        });//end of ajax

Rory McCrossan · Accepted Answer · 2015-11-26 08:15:41Z

3

The issue is because your .shiftt_class selector in the each() block is retrieving all elements. Calling val() on that is confusing matters. You should instead look for the .shiftt_class element with the value matching the shift_id in the iteration. To do this, you can use the attribute selector. Try this:

$.each(shifts, function (index, shift) {
    $('.shiftt_class[value="' + shift.shift_id + '"]').prop("checked", true);
});

Example fidddle

Also note that the length check on the returned data is redundant as the loop won't execute on an empty array anyway.

answered Nov 26, 2015 at 8:15

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

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

3 Comments

Sajeev C Over a year ago

It's not getting set.

Rory McCrossan Over a year ago

Do you have any, more helpful, error messages? You can see from the example fiddle that this works given the information in your question

Sajeev C Over a year ago

It works in fiddle. Not in my code. I'll post the whole jQuery function. See my updated question.

Collectives™ on Stack Overflow

Error in checking checkbox value using jQuery

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related