How to call ajax by jquery on multiple checkboxes?

Question

I have multiple (number may go as high as 500) checkboxes, as follows

<?php
$duplicate_checked='';
if ($repeat==1)
{
$duplicate_checked=' checked';
} else {
$duplicate_checked='';
}
?>

<input type="checkbox" name="isrepeat-<?php echo $id_no; ?>" id="isrepeat-<?php echo $id_no; ?>" class ="class_isrepeat" value="<?php echo $id_no;?>" <?php echo $duplicate_checked;?> onclick="updateRepeat(this.checked,<?php echo $id_no;?>);"/><label for="isrepeat-<?php echo $id_no; ?>">Is a duplicate Question?</label>

I want to update the value of Repeat column of the particular question number ($id_no, in this e.g.) in mysql database (e.g. named Qbank) on change of checked value of that checkbox.

I am able to successfully get checked value in javascript function updateRepeat(value, ques_no); But I couldn't get a way to call ajax by javascript.

In jquery this can be done something like -

$('#isrepeat-{question no}').change(function() {
    $.post('update_repeat.php', {ques_no: question_number, repeated: checkbox_value_integer},
    function(data){
    $("#result").html(data);
    });
    });

Edit - 1. #isrepeat-{question no} represents id tag of the checkbox depending on question number eg, #isrepeat-1, #isrepeat-2, #isrepeat-3 etc.

But, This would require definite question number in "#isrepeat-{question-no}". I dont know how to construct this jquery in a way that it automatically picks question no and checked property for any particular checkbox clicked.

If I use class, instead of id for checkboxes then, how can i get question number and checkbox checked value for any checkbox in a single function?

Also, although I have a basic Idea what should be in update_repeat.php for ajax call, it would be nice if you could give any way by which this update can be easily done in ajax.

thanks. regards,

#isrepeat-{question no} what is this ? can you use some class for this purpose and use this to get current changed checkbox — Susheel Singh
– Susheel Singh, Commented Jun 8, 2014 at 11:15
@susheel '#isrepeat-{question no}' means id number of checkbox depending on question number eg, '#isrepeat-1', '#isrepeat-2', '#isrepeat-3' etc. Can you please tell me by any e.g. how to use class '.class_isrepeat' to get 'this' value. thanks — Dr. Atul Tiwari
– Dr. Atul Tiwari, Commented Jun 8, 2014 at 11:25
wrap each repeat in it's own container and traverse within that container. This is a very common pattern. If you want more help you should be providing properly formatted source html in question — charlietfl
– charlietfl, Commented Jun 8, 2014 at 11:39

Teguh Syahmar · Accepted Answer · 2014-06-08 11:47:06Z

1

Firstly, you are correct by utilizing class as selection to trigger the function. You can then continue by calling $(this) within the trigger callback to utilize the document object for each particular checkbox user clicked on.

Then just use .attr to get an input attribute that stores some information.

Which makes the code into

$('.class_isrepeat').change(function() {
   question_number = $(this).val();
   checkbox_value_integer = $(this).prop('checked');
   $.post('update_repeat.php', {ques_no: question_number, repeated: checkbox_value_integer},    function(data){
       $("#result").html(data);
   });
});

edited Jun 8, 2014 at 11:47

answered Jun 8, 2014 at 11:40

Teguh Syahmar

1365 bronze badges

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

6 Comments

charlietfl Over a year ago

should be using prop() for checked or simply use this.checked

Dr. Atul Tiwari Over a year ago

@charlietfl just one doubt, this code works correctly with prop(), while it reverses with attr or this.checked. (I mean, the later 2 return the state before click) Why is it so?

charlietfl Over a year ago

@Dr.AtulTiwari without code context I don't understand the issue. Make a demo in jsfiddle.net that replicates it

Dr. Atul Tiwari Over a year ago

@charlietfl e.g. if the checkbox is in NOT checked state initially and using the demo function mentioned by Teguh above, if I get the value of checkbox_value_integer in an alert box by using prop() - it returns true; while using attr() or this.checked return undefined and vice-versa.

Dr. Atul Tiwari Over a year ago

@charlietfl jsfiddle link, the prop is working while attr and this.value is not working

|

Collectives™ on Stack Overflow

How to call ajax by jquery on multiple checkboxes?

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related