Develop Reference

Select multiple check boxes by clicking the first one

I have an html table with many check boxes. If I select the first check box, the next one is automatically selected. Does someone know how to do this? Also, the exact row number in table is unknown.
function toggle(source) {
var row_index = $("#checkFirst").index();
var row_first = $(".row").index();
checkboxes = document.getElementsByName('row');
for (var i = 0, n = checkboxes.length; i < n; i++) {
if (i == row_index && i == row_first) {
checkboxes[i].checked = source.checked;
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tbody data-bind="foreach: list">
<tr>
<td><input type="checkbox" id="checkFirst" onClick="toggle(this)" /></td>
<td><input type="checkbox" name="row"></td>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
</tr>
</tbody>

You can use below code for this. First give class checkbox to all other checkboxes. Hope this can help you
$(function(){
$("#checkFirst").click(function () {
$('.checkbox').attr('checked', this.checked);
});
$(".checkbox").click(function(){
if($(".checkbox").length == $(".checkbox:checked").length) {
$("#checkFirst").attr("checked", "checked");
} else {
$("#checkFirst").removeAttr("checked");
}
});
});

You can try with below code. It will help you.
jQuery file:
https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js
<table>
<tbody data-bind="foreach: list">
<tr id="first">
<td><input type="checkbox" id="checkfirst" onClick="toggle('first',this.id)"/></td>
<td><input type="checkbox" name="row"></td>
<td><input type="checkbox" name="row"></td>
<td><input type="checkbox" name="row"></td>
<td><input type="checkbox" name="row"></td>
</tr>
<tr id="second">
<td><input type="checkbox" id="checksecond" onClick="toggle('second',this.id)"/></td>
<td><input type="checkbox" ></td>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
</tr>
</table>
Script
<script>
function toggle(source,id) {
chcked = $('#'+id).prop( "checked" );
if(chcked)
{
$('#'+source+' :checkbox').each(function() {
this.checked = true;
});
}
else
{
$('#'+source+' :checkbox').each(function() {
this.checked = false;
});
}
}
</script>

You can try this snippet.
function handleCheck(e) {
let will_change = false;
if (e.shiftKey && this.checked) {
checkboxes.forEach(element => {
if (element === this || element === last_checked) {
will_change = !will_change;
}
if (will_change) {
element.checked = true;
}
});
}
last_checked = this;
}
Then add a click event listener to each of the checkboxes you want to act as a group
https://codepen.io/anon/pen/GyQEJZ

this makes the first checkbox a global control for all
$('#checkFirst').on('change',function(){
if($(this).is(':checked'))
$('input[type="checkbox"]').prop('checked', true);
else
$('input[type="checkbox"]').prop('checked', false);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<tbody data-bind="foreach: list">
<tr>
<td><input type="checkbox" id="checkFirst"/></td>
<td><input type="checkbox" name="row"></td>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
</tr>
</tbody>
and this is to select the following checkboxes in the same row
$('input[type="checkbox"]').on('change',function(){
$(this).parent().nextAll().find('input[type="checkbox"]').prop('checked', $(this).is(':checked'));
});

Nested table checkbox check/Uncheck

I have a page with nested table and checkbox for checking all the table cell <td>. And checkbox for each table cell <td> for checking respective cell.
What I'm trying to do is
CheckAll checkbox checks/uncheck all the parent and child checkbox
Uncheck a parent checkbox unchecks CheckALL checkbox and unchecks all the child checkbox
Check a parent checkbox checks all child checkbox and finds out if all other parent checkbox are checked or not, to check CheckALL checkbox
checking a child checkbox should check the respective parent
unchecking a child checkbox should check if siblings are checked, if not checked parent checbox should get unchecked and if checkALL checkbox is checked it should get unchecked too.
I'm unable to do this.
Here is what I have tried.
html:
<table class="table table-striped tablesorter">
<thead>
<tr colspan="2">
<th>
<input type="checkbox" id="checkedAll">
</th>
<th>Check/UnCheck ALL Boxes</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" class="checkParent">
</td>
<td>1KWT</td>
</tr>
<tr>
<td colspan="2" style="padding: 0">
<table class="innertable" style="margin: 10px 0px 10px 50px;border: 1px solid #d0d0d0">
<thead>
<tr>
<th></th>
<th>Sub</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" class="checkChild" style="margin-top: -3px"> </td>
<td>1KWT1</td>
</tr>
<tr>
<td>
<input type="checkbox" class="checkChild" style="margin-top: -3px"> </td>
<td>1KWT2</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="checkParent" style="margin-top: -3px"> </td>
<td>1OMN</td>
</tr>
<tr>
<td colspan="2" style="padding: 0">
<table class="innertable" style="margin: 10px 0px 10px 50px;border: 1px solid #d0d0d0">
<thead>
<tr>
<th></th>
<th>Sub</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" class="checkChild" style="margin-top: -3px"> </td>
<td>1OMN1</td>
</tr>
<tr>
<td>
<input type="checkbox" class="checkChild" style="margin-top: -3px"> </td>
<td>1OMN2</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
script:
$(document).ready(function() {
$("#checkedAll").change(function(){
if(this.checked){
$(".checkParent, .checkChild").each(function(){
this.checked=true;
});
}else{
$(".checkParent, .checkChild").each(function(){
this.checked=false;
});
}
});
$(".checkParent").click(function () {
if ($(this).is(":checked")){
var isAllChecked = 0;
$(".checkParent").each(function(){
if(!this.checked)
isAllChecked = 1;
})
$(".checkChild").prop("checked", true);
if(isAllChecked == 0){ $("#checkedAll").prop("checked", true); }
}else {
$("#checkedAll, .checkChild").prop("checked", false);
}
});
$(".checkChild").click(function () {
if ($(this).is(":checked")){
$(".checkParent").prop("checked", true);
}else {
$(".checkParent").prop("checked", false);
}
});
});
link to fiddle https://jsfiddle.net/4zhhpwva/

I've done it. Improvement's are welcomed. Here is the updated script
$(document).ready(function() {
$("#checkedAll").change(function() {
if (this.checked) {
$(".checkParent, .checkChild").each(function() {
this.checked = true;
});
} else {
$(".checkParent, .checkChild").each(function() {
this.checked = false;
});
}
});
$(".checkParent").click(function() {
if ($(this).is(":checked")) {
var isAllChecked = 0;
$(".checkParent").each(function() {
if (!this.checked)
isAllChecked = 1;
})
$(this).closest("tr").next("tr").find(".checkChild").prop("checked", true);
if (isAllChecked == 0) {
$("#checkedAll").prop("checked", true);
}
} else {
$("#checkedAll").prop("checked", false);
$(this).closest("tr").next("tr").find(".checkChild").prop("checked", false);
}
});
$(".checkChild").click(function() {
if ($(this).is(":checked")) {
var isChildChecked = 0;
$(".checkChild").each(function() {
if (!this.checked)
isChildChecked = 1;
});
if (isChildChecked == 0) {
$("#checkedAll").prop("checked", true);
}
$(this).closest("table").closest("tr").prev("tr").find(".checkParent").prop("checked", true);
} else {
var isAllSiblingChecked = 0;
$(this).closest("tr").nextAll("tr").find(".checkChild").each(function() {
if ($(this).is(":checked"))
isAllSiblingChecked = 1;
});
$(this).closest("tr").prev("tr").find(".checkChild").each(function() {
if ($(this).is(":checked"))
isAllSiblingChecked = 1;
});
if (isAllSiblingChecked == 0) {
$(this).closest("table").closest("tr").prev("tr").find(".checkParent").prop("checked", false);
}
$("#checkedAll").prop("checked", false);
}
});
});
I've updated the fiddle here to see the working https://jsfiddle.net/shumaise/4zhhpwva/10/

Your issue is that the selectors you have in place are always getting ALL checkchildren and ALL checkParents instead of just the nested ones. You need to make it more specific.
There's definitely a better way to do this, but as an example to show what I mean, on the checkParent click function, instead of $(".checkChild") which will grab all checkChildren on the page, you probably want to do something like $(this).closest("tr").next("tr").find(".checkChild")
That said, if you change your markup so that they are nested under a common ancestor that isn't shared with any other checkChild elements, that could be simplified so that the .next wouldn't be needed.
I've updated your fiddle here - https://jsfiddle.net/4zhhpwva/3/ so you can see it working...

Click table row to select checkbox and disable/enable button jquery

HTML:
<table class="vi_table">
<thead>
<tr>
<th><input type="checkbox" class="v_checkbox"/>Select</th>
<th>ID</th>
<th>A</th>
<th>B</th>
</tr>
</thead>
<tbody>
<tr class="pv">
<td><input type="checkbox" class="v_checkbox"/></td>
<td>5</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr class="pv">
<td><input type="checkbox" class="v_checkbox"/></td>
<td>1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr class="pv">
<td><input type="checkbox" class="v_checkbox"/></td>
<td>9</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
</tbody>
</table>
<input id="percentage_submit_button" name="commit" type="submit" value="Set % for Selections">
Css:
.diff_color {
background: gray;
}
.vi_table {
background: #c3ced6;
border: 1px solid black;
margin-bottom: 30px;
padding: 5px;
}
.vi_table thead tr th {
border: 1px solid black;
}
Jquery:
$(document).ready(function () {
$(document).on('click', '.vi_table tbody tr', function (e) {
var submit = $('#percentage_submit_button');
var checked= $(this).find('input[type="checkbox"]');
submit.prop('disabled', true);
checked.prop('checked', !checked.is(':checked'));
if($('.v_checkbox').is(':checked')) {
$(this).closest('tr').addClass('diff_color');
submit.removeAttr('disabled');
} else {
$(this).closest('tr').removeClass('diff_color');
submit.prop('disabled', true);
}
});
$(document).on('click', 'input[type="checkbox"]', function () {
$(this).prop('checked', !$(this).is(':checked'));
$(this).parent('tr').toggleClass('selected'); // or anything else for highlighting purpose
});
});
So Far - Fiddle
I want to select the checkbox by clicking anywhere on the row including the checkbox. I would like to enable and disable the button if any one of the checkbox is selected in the tbody.
clicking the Selectall checkbox needs to select all the rows and enable the button.
Still I have some issues on selecting and deselecting the checkbox.
I gave the example of what I have tried so far, but I would like to make this clean like non repeating code. how can I make this code simple and more efficient way?
Thanks

Made a few changes so the checkboxes align. See code comments for further info:
Fiddle in case Code Snippet doesn't work
var testing = function (e) {
var submit = $('#percentage_submit_button');
var checkbox = $(this);
if ($(this).is('tr')) {
checkbox = $(this).find('input[type="checkbox"]');
}
submit.prop('disabled', true); // Disable submit button
checkbox.prop('checked', !checkbox.is(':checked')); // Change checked property
if (checkbox.hasClass('all')) { // If this is "all"
$('.v_checkbox:not(.all)').prop('checked', checkbox.is(':checked')); // Set all other to same as "all"
if (checkbox.is(':checked')) { // change colour of "all" tr
checkbox.closest('tr').addClass('diff_color');
} else {
checkbox.closest('tr').removeClass('diff_color');
}
}
var blnAllChecked = true; // Flag all of them as checked
$('.v_checkbox:not(.all)').each(function() { // Loop through all checkboxes that aren't "all"
if ($(this).is(':checked')) {
$(this).closest('tr').addClass('diff_color');
submit.prop('disabled', false); // enable submit if one is checked
} else {
$(this).closest('tr').removeClass('diff_color');
blnAllChecked = false; // If one is not checked, flag all as not checked
}
});
if (blnAllChecked) {
$('.v_checkbox.all').closest('tr').addClass('diff_color');
$('.v_checkbox.all').prop('checked', true);
} else {
$('.v_checkbox.all').closest('tr').removeClass('diff_color');
$('.v_checkbox.all').prop('checked', false);
}
};
$(document).on('click', '.pv', testing);
$(document).on('click', 'input[type="checkbox"]', testing);
.diff_color {
background: gray;
}
.vi_table {
background: #c3ced6;
border: 1px solid black;
margin-bottom: 30px;
padding: 5px;
}
.vi_table thead tr th {
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="vi_table">
<thead>
<tr class="pv">
<th>
<input type="checkbox" class="v_checkbox all" />Select</th>
<th>ID</th>
<th>A</th>
<th>B</th>
</tr>
</thead>
<tbody>
<tr class="pv">
<td>
<input type="checkbox" class="v_checkbox" />
</td>
<td>5</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr class="pv">
<td>
<input type="checkbox" class="v_checkbox" />
</td>
<td>1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr class="pv">
<td>
<input type="checkbox" class="v_checkbox" />
</td>
<td>9</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
</tbody>
</table>
<input id="percentage_submit_button" name="commit" type="submit" value="Set % for Selections">

I added an id to the select all input <input type="checkbox" id="v_checkbox_all" class="v_checkbox" />Select</th>
The select all input is checked first. Applying it's status to each input, then using the .each() to loop though each row and apply the row styles.
Demo here: JSfiddle
$(document).ready(function () {
var testing = function (e) {
var submit = $('#percentage_submit_button');
var checked = $(this).find('input[type="checkbox"]');
var checkedAll = $('#v_checkbox_all');
var isAllChecked = false;
submit.prop('disabled', true);
checked.prop('checked', !checked.is(':checked'));
$(this).prop('checked', !$(this).is(':checked'));
var checkedCount = $('.v_checkbox:checked').not('#v_checkbox_all').length;
var totalCount = $('.v_checkbox').not('#v_checkbox_all').length;
if (checked.prop('id') === 'v_checkbox_all') {
isAllChecked = true;
} else {
if (checked.prop('id') === 'v_checkbox_all' || checkedCount === totalCount) {
checkedAll.prop('checked', true);
} else {
checkedAll.prop('checked', false);
}
}
if (isAllChecked) {
if (checkedAll.is(':checked')) {
$('.v_checkbox').each(function () {
$(this).prop('checked', true);
});
} else {
$('.v_checkbox').each(function () {
$(this).prop('checked', false);
});
}
}
$('.v_checkbox').each(function () {
if ($(this).is(':checked')) {
$(this).closest('tr').addClass('diff_color');
submit.removeAttr('disabled');
} else {
$(this).closest('tr').removeClass('diff_color');
}
});
};
$(document).on('click', '.pv', testing);
$(document).on('click', 'input[type="checkbox"]', testing);
$('#percentage_submit_button').prop('disabled', true);
});

For selecting ALL checkboxes use this code:
$('.v_checkbox').change(function(){
$('.v_checkbox').each(function(){
$(this).prop( "checked", true );
})
;
})

Show or hide table row if checkbox is checked

I want to hide a table row (with input fields inside) when a checkbox is checked.
I found something that works:
HTML
<table>
<tr id="row">
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox">Hide inputs</td>
</tr>
</table>
Script
$(document).ready(function () {
$('#checkbox').change(function () {
if (!this.checked)
$('#row').fadeIn('slow');
else
$('#row').fadeOut('slow');
});
});
Fiddle
But this only works if the checkbox is not checked already. So if the checkbox is checked at the beginning, I want the table row to be hidden. How do I do this?
Please note that I don't know much about JavaScript, but I really need this

trigger .change() event after you attach events:
$(function () {
$('#checkbox1, #checkbox2').change(function () {
var row = $(this).closest('tr').prev();
if (!this.checked)
row.fadeIn('slow');
else
row.fadeOut('slow');
}).change();
});
Note: I make code shorter.
jsfiddle

Just call the change event after you initially register it:
$(document).ready(function () {
$('#checkbox').change(function () {
if (!this.checked)
$('#row').fadeIn('slow');
else
$('#row').fadeOut('slow');
});
$('#checkbox').change();
});

I believe this is what you were looking for:
$(function() {
var init = true;
$('input[type="checkbox"]').change(function() {
if (this.checked) {
if (init) {
$(this).prev().hide();
init = false;
} else $(this).prev().slideUp();
} else $(this).prev().slideDown();
}).change();
});
input[type='text'] {
display: block;
padding: 3px 5px;
margin: 5px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
<input type="text" placeholder="Shown" />
<input type="checkbox" />Hide input
</div>
<div>
<input type="text" placeholder="Hidden" />
<input type="checkbox" checked/>Hide input
</div>

Generic solution without hardcoded ids:
$('table :checkbox').change(function(e, speed) {
speed = typeof speed == 'undefined' ? 'slow' : 0;
$(this).closest('tr').prev()[this.checked ? 'fadeOut' : 'fadeIn'](speed);
}).trigger('change', [0]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr id="row1">
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox1">Hide inputs</td>
</tr>
<tr id="row2">
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox2" checked>Hide inputs</td>
</tr>
</table>

just call the change function in document.ready after it
$('#checkbox').change();
Like this
$(document).ready(function () {
$('#checkbox').change(function () {
if (!this.checked) $('#row').fadeIn('slow');
else $('#row').fadeOut('slow');
});
$('#checkbox').change();
});
Here is the DEMO FIDDLE

Musefan's answer is excelent, but following is also another way!
$(document).ready(function () {
($('#checkbox').prop('checked')==true) ? $('#row').fadeOut('slow'):$('#row').fadeIn('slow');
$('#checkbox').change(function () {
if (!this.checked)
$('#row').fadeIn('slow');
else
$('#row').fadeOut('slow');
});
});

you can initially hide them if you really want the checkbox to be checked initially.
<table>
<tr id="row" style="display: none;">
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox" checked>Hide inputs</td>
</tr>
</table>
<script>
$(document).ready(function () {
$('#checkbox').change(function () {
if (!this.checked)
$('#row').fadeIn('slow');
else
$('#row').fadeOut('slow');
});
});
</script>

var showOrHideRow=fucntion(isChecked){
if (isChecked)
$('#row').fadeOut('slow');
else
$('#row').fadeIn('slow');
};
$(document).ready(function () {
showOrHideRow($('#checkbox').is(":checked"));
$('#checkbox').change(function () {
showOrHideRow(this.checked);
});
});

$('#tbl_name tr').find('input:checkbox:checked').closest('tr').show();
$('#tbl_name tr').find('input:checkbox:Unchecked').closest('tr').hide();

How to select all checkboxes with jQuery?

I need help with jQuery selectors. Say I have a markup as shown below:
<form>
<table>
<tr>
<td><input type="checkbox" id="select_all" /></td>
</tr>
<tr>
<td><input type="checkbox" name="select[]" /></td>
</tr>
<tr>
<td><input type="checkbox" name="select[]" /></td>
</tr>
<tr>
<td><input type="checkbox" name="select[]" /></td>
</tr>
</table>
</form>
How to get all checkboxes except #select_all when user clicks on it?

A more complete example that should work in your case:
$('#select_all').change(function() {
var checkboxes = $(this).closest('form').find(':checkbox');
checkboxes.prop('checked', $(this).is(':checked'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<table>
<tr>
<td><input type="checkbox" id="select_all" /></td>
</tr>
<tr>
<td><input type="checkbox" name="select[]" /></td>
</tr>
<tr>
<td><input type="checkbox" name="select[]" /></td>
</tr>
<tr>
<td><input type="checkbox" name="select[]" /></td>
</tr>
</table>
</form>
When the #select_all checkbox is clicked, the status of the checkbox is checked and all the checkboxes in the current form are set to the same status.
Note that you don't need to exclude the #select_all checkbox from the selection as that will have the same status as all the others. If you for some reason do need to exclude the #select_all, you can use this:
$('#select_all').change(function() {
var checkboxes = $(this).closest('form').find(':checkbox').not($(this));
checkboxes.prop('checked', $(this).is(':checked'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<table>
<tr>
<td><input type="checkbox" id="select_all" /></td>
</tr>
<tr>
<td><input type="checkbox" name="select[]" /></td>
</tr>
<tr>
<td><input type="checkbox" name="select[]" /></td>
</tr>
<tr>
<td><input type="checkbox" name="select[]" /></td>
</tr>
</table>
</form>

Simple and clean:
$('#select_all').click(function() {
var c = this.checked;
$(':checkbox').prop('checked', c);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<table>
<tr>
<td><input type="checkbox" id="select_all" /></td>
</tr>
<tr>
<td><input type="checkbox" name="select[]" /></td>
</tr>
<tr>
<td><input type="checkbox" name="select[]" /></td>
</tr>
<tr>
<td><input type="checkbox" name="select[]" /></td>
</tr>
</table>
</form>

Top answer will not work in Jquery 1.9+ because of attr() method. Use prop() instead:
$(function() {
$('#select_all').change(function(){
var checkboxes = $(this).closest('form').find(':checkbox');
if($(this).prop('checked')) {
checkboxes.prop('checked', true);
} else {
checkboxes.prop('checked', false);
}
});
});

$("form input[type='checkbox']").attr( "checked" , true );
or you can use the
:checkbox Selector
$("form input:checkbox").attr( "checked" , true );
I have rewritten your HTML and provided a click handler for the main checkbox
$(function(){
$("#select_all").click( function() {
$("#frm1 input[type='checkbox'].child").attr( "checked", $(this).attr("checked" ) );
});
});
<form id="frm1">
<table>
<tr>
<td>
<input type="checkbox" id="select_all" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="select[]" class="child" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="select[]" class="child" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="select[]" class="child" />
</td>
</tr>
</table>
</form>

$(function() {
$('#select_all').click(function() {
var checkboxes = $(this).closest('form').find(':checkbox');
if($(this).is(':checked')) {
checkboxes.attr('checked', 'checked');
} else {
checkboxes.removeAttr('checked');
}
});
});

$(document).ready(function(){
$("#select_all").click(function(){
var checked_status = this.checked;
$("input[name='select[]']").each(function(){
this.checked = checked_status;
});
});
});

jQuery(document).ready(function () {
jQuery('.select-all').on('change', function () {
if (jQuery(this).is(':checked')) {
jQuery('input.class-name').each(function () {
this.checked = true;
});
} else {
jQuery('input.class-name').each(function () {
this.checked = false;
});
}
});
});

This code works fine with me
<script type="text/javascript">
$(document).ready(function(){
$("#select_all").change(function(){
$(".checkbox_class").prop("checked", $(this).prop("checked"));
});
});
</script>
you only need to add class checkbox_class to all checkbox
Easy and simple :D

$("#select_all").change(function () {
$('input[type="checkbox"]').prop("checked", $(this).prop("checked"));
});

Faced with the problem, none of the above answers do not work. The reason was in jQuery Uniform plugin (work with theme metronic).I hope the answer will be useful :)
Work with jQuery Uniform
$('#select-all').change(function() {
var $this = $(this);
var $checkboxes = $this.closest('form')
.find(':checkbox');
$checkboxes.prop('checked', $this.is(':checked'))
.not($this)
.change();
});

One checkbox to rule them all
For people still looking for plugin to control checkboxes through one that's lightweight, has out-of-the-box support for UniformJS and iCheck and gets unchecked when at least one of controlled checkboxes is unchecked (and gets checked when all controlled checkboxes are checked of course) I've created a jQuery checkAll plugin.
Feel free to check the examples on documentation page.
For this question example all you need to do is:
$( '#select_all' ).checkall({
target: 'input[type="checkbox"][name="select"]'
});
Isn't that clear and simple?

$('.checkall').change(function() {
var checkboxes = $(this).closest('table').find('td').find(':checkbox');
if($(this).is(':checked')) {
checkboxes.attr('checked', 'checked');
} else {
checkboxes.removeAttr('checked');
}
});

$("#select_all").live("click", function(){
$("input").prop("checked", $(this).prop("checked"));
}
});

I'm now partial to this style.
I've named your form, and added an 'onClick' to your select_all box.
I've also excluded the 'select_all' checkbox from the jquery selector to keep the internet from blowing up when someone clicks it.
function toggleSelect(formname) {
// select the form with the name 'formname',
// then all the checkboxes named 'select[]'
// then 'click' them
$('form[name='+formname+'] :checkbox[name="select[]"]').click()
}
<form name="myform">
<tr>
<td><input type="checkbox" id="select_all"
onClick="toggleSelect('myform')" />
</td>
</tr>
<tr>
<td><input type="checkbox" name="select[]"/></td>
</tr>
<tr>
<td><input type="checkbox" name="select[]"/></td>
</tr>
<tr>
<td><input type="checkbox" name="select[]"/></td>
</tr>
</table>

Here's a basic jQuery plugin I wrote that selects all checkboxes on the page, except the checkbox/element that is to be used as the toggle:
(function($) {
// Checkbox toggle function for selecting all checkboxes on the page
$.fn.toggleCheckboxes = function() {
// Get all checkbox elements
checkboxes = $(':checkbox').not(this);
// Check if the checkboxes are checked/unchecked and if so uncheck/check them
if(this.is(':checked')) {
checkboxes.prop('checked', true);
} else {
checkboxes.prop('checked', false);
}
}
}(jQuery));
Then simply call the function on your checkbox or button element:
// Check all checkboxes
$('.check-all').change(function() {
$(this).toggleCheckboxes();
});