This code snippet will show you how to manipulate checkboxes using jquery.
Jquery Checkbox Examples Overview
- Get checked checkboxes
- Get unchecked checkboxes
- Get checkboxes inside specific container
- Check all checkboxes
- Uncheck all checkboxes
- Validate checkbox is checked
- Toggle checkbox
- Highlight Table row on check checkbox
- Disable and Enable Checkbox List On Single Checkbox
- Demo and Download
- Download as PDF EBook
Get checked checkboxes
Loops through all the checked checkboxes and adds checkbox value to an array using jquery :checkbox selector.
$(":checkbox:checked").each(
function() {
$(this).val();
}
);
Get unchecked checkboxes
Loops through all the unchecked checkboxes and adds checkbox value to an array.
$(":checkbox").not(:checked).each(
function() {
$(this).val();
}
);
Get checkboxes inside specific container
Loops through all the checkboxes inside given container(Ex:div) and adds checkbox value to an array.
$("div :checkbox").each(
function() {
$(this).val();
}
);
Check all checkboxes
Loops through all the checkboxes and marks all the checkboxes as checked using jquery loop.
$(":checkbox").each(
function() {
$(this).attr('checked', true);
}
);
Uncheck all checkboxes
Loops through all the checkboxes and marks all the checkboxes as unchecked.
$(":checkbox").each(
function() {
$(this).attr('checked', false);
}
);
Validate checkbox is checked
Checks if a given checkbox is checked.
if($('#checkboxid').is(':checked')) {
alert($('#checkboxid').val());
}
Toggle checkbox
Toggles the display of a container based on checkbox select.
This is the content of toggle div.
$('#toggleCheck').change(function(){
$('#toggleDiv').toggle();
});
Highlight Table row on check checkbox
Create a table with a checkbox for each row. Table row will be highlighted when checkbox is checked.
.tabledata{
background-color: #cfcfcf;
}
.highlighttabledata{
background-color: #f00;
}
Name Mark Smith John Adams James
// Highlight Table row on check checkbox
$('.tabledata').change(function(){
var id = $(this).attr('id');
var rowId = "#"+id.replace("chk", "tr");
$(rowId).toggleClass("highlighttabledata");
});
Disable and Enable Checkbox List On Single Checkbox
Toggle disable and enable attribute on list of checkboxes based on a single checkbox click event.
$("#single_check").click(
function() {
$(".list_check").each(
function() {
this.disabled = !this.disabled;
}
);
}
);
Demo and Download
You may have browsed many websites and spent hours to find the informaion provided in this tutorial.
So take 1 minute to share this post to help others find it quickly. Thank You for visiting InnovativePHP.
