How to call jQuery function when checkbox is checked by PHP? - php

Question

Here is my PHP code:
<?php if (isset($mod['display']) && ($mod['display'] == "1")) { ?>
<input class="display_checkbox" type="checkbox" name="chk[<?php echo $row; ?>][display]" value="1" checked="checked" onclick="checkbox_click(this);" />
<?php } else { ?>
<input class="display_checkbox" type="checkbox" name="chk[<?php echo $row; ?>][display]" value="1" onclick="checkbox_click(this);" />
<?php } ?>
jQuery:
function checkbox_click(current) {
if($(current).is(':checked')) {
// do stuff....
} else {
// do stuff....
}
}
In the above code, when $mod['display'] is true, the checkbox is checked but it does not invoke checkbox_click() function. I tried onchange= instead of onclick= but it does not seem to have any effect. I need to keep the onclick or onchange in the field.

Answer 1

Try to use prop function for this,
Also you don't need to call function, you can create it by using jquery.on() function like,
$(function(){
$(document).on('click','.display_checkbox',function(){
if($(this).prop('checked')) {
// do stuff....
} else {
// do stuff....
}
});
});
And then remove onclick="checkbox_click(this);" from your html checkbox element
Updated
To initialize it on document ready
$(function(){
$('.display_checkbox').each(function(){
if($(this).prop('checked')) {
// do stuff....
} else {
// do stuff....
}
});
});
Read on() and prop()

Answer 2

Try this:
<?php if (isset($mod['display']) && ($mod['display'] == "1")) { ?>
<input class="display_checkbox selectedcheckbox" type="checkbox" name="chk[<?php echo $row; ?>][display]" value="1" checked="checked" onclick="checkbox_click(this);" />
<?php } else { ?>
<input class="display_checkbox" type="checkbox" name="chk[<?php echo $row; ?>][display]" value="1" onclick="checkbox_click(this);" />
<?php } ?>
jQuery:
$(document).ready(function(){
var obj = $(".selectedcheckbox");
var found = obj.length;
if(found == 1)
{
checkbox_click(obj);
}
});
function checkbox_click(current) {
if($(current).is(':checked')) {
// do stuff....
} else {
// do stuff....
}
}

Answer 3

If you want function to be executed after page load, and also be axecuted every time checkbox state is changed you should do it this way:
<?php if (isset($mod['display']) && ($mod['display'] == "1")) { ?>
<input class="display_checkbox" type="checkbox" name="chk[<?php echo $row; ?>][display]" value="1" checked="checked" onclick="checkbox_click(this);" />
<?php } else { ?>
<input class="display_checkbox" type="checkbox" name="chk[<?php echo $row; ?>][display]" value="1" onclick="checkbox_click(this);" />
<?php } ?>
and in script:
function checkbox_click(current) {
if($(current).is(':checked')) {
// do stuff....
} else {
// do stuff....
}
}
$(function(){
$('.display_checkbox').each(function(){
checkbox_click($(this));
});
});
Also, I wouldn't do it that way. in this case, you should use onchange event binding.
Optimal solution i think would be:
<input class="display_checkbox" type="checkbox" name="chk[<?php echo $row; ?>][display]" value="1" <?php if (isset($mod['display']) && ($mod['display'] == "1")) { ?>checked="checked"<?php } ?> />
and javascript should look like this:
$(function(){
$('.display_checkbox').change(function(){
if($(this).is(':checked')) {
// do stuff....
} else {
// do stuff....
}
});
$('.display_checkbox').each(function(){
$(this).change();
});
});