A lot of times, you’ll want to call a javascript function when a checkbox is changed from unchecked to check and vice versa. Up until the release of jQuery 1.4, the obvious way to do it (the jQuery .change() event) did not work properly across all versions of Internet Explorer. Instead, you had to check for the .click() event. This was an accessibility problem because it did not fire when a user changed a checkbox with the space bar instead of by clicking. Well, now we can rejoice. The following code snippet works exactly how you think it would across browsers, including IE.
<!-- Load jQuery, and the necessary html --> <script type='text/javascript src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script> <input type='checkbox' name='my_checkbox' value='true' checked='checked'>
$(document).ready(function(){
$(":checkbox").change(function(){
if($(this).attr("checked"))
{
//call the function to be fired
//when your box changes from
//unchecked to checked
}
else
{
//call the function to be fired
//when your box changes from
//checked to unchecked
}
});
});
what is the “:” doing in this statement?
$(“:checkbox”)
Selects all the checkboxes on the page.
Umm… no.
It’s a quasi ‘class’ that provides a true or false based on the checked state of the box.
no, it does what Nelson said… selects all checkboxes on page
helpful..
I used a modified version of this that works VERY well (the above actually didn’t work right.
$(document).ready(function(){
$(":checkbox").change(function(){
if($(this).is(':checked')) showCol(this.value);
else hideCol(this.value);
});
});
showCol and hideCol are simply functions that show/hide a table column. ?
Thanks Jesse,
your code is working for me. ?
thank you very much ?
thank you, it’s very useful for me
?
What if I want a specific checkbox not every checkbox?
Thanks its really a great help for me.
Thanks for this little tutorial, very useful!
Code really works thanks for ur code
$(‘input:checkbox[Title=”Mycheck”]’).change(function (){
if ($(this).attr(‘checked’)) {
alert(‘is checked’);
} else {
alert(‘not checked’);
}
});
thanks . very useful ?
$(“:checkbox”).change(function(e) {
if($(this).is(“:checked”))
{
$(“ul ul”).slideUp(“slow”);
}
else
{
$(“ul ul”).slideDown(“slow”);
}
});
this code work very well
i used jquery grid.. and my code doesnt exist when i click an editing the check box in jquery.. a have a certain fields for editing .. what codes can i used/
function EditProcess(id) {
var lastsel;
if (id && id !== lastsel) {
$(“#grdFM_Process”).restoreRow(lastsel);
lastsel = id;
var objRowData = $(“#grdFM_Process”).getRowData(lastsel);
$(“[id$=’hidProcessID’]”).val(id);
$(“[id$=’txtProcessName’]”).val(objRowData.ProcessName);
$(“[id$=’txtDocCode’]”).val(objRowData.ProcessCode);
$(“[id$=’ddl_FM_Category’]”).val(objRowData.CategoryID)
// document.getElementById(“CheckBox1”).checked = true;
// document.getElementById(“CheckBox1”).checked = false;
if (objRowData.SubDocuments == ‘True’) {
$(“[id$=’MainContent_ctlFM_Process1_CheckBox1′]”).attr(‘checked’, true);
} else {
$(“[id$=’MainContent_ctlFM_Process1_CheckBox1′]”).removeAttr(‘checked’);
}
$(“[id$=’btnAdd_process’]”).attr(“src”, “../images/save.jpg”);
$(“[id$=’btnAdd_process’]”).hover(
function () {
$(this).attr(“src”, “../images/save_active.jpg”);
},
function () {
$(this).attr(“src”, “../images/save.jpg”);
}
);
}
}
this.checkedis MUCH faster than$(this).attr("checked")I want to send the checkbox value to php page and insert or delete in database, how do i do that with this script including ajax