Develop Reference

Jquery: Select all check boxes when 'select all' is checked

I have a form that prints a out menu items from each category. I want to have a select all checkbox over each category such that when clicked, all checkboxes of that category are selected.
Issue: Sometimes some check boxes are not checked by default e.g. no data in database - in that case the select all checkbox should not be checked when page is rendered (it should only checked if all its child check boxes are checked).
Current partial implementation (checked is true for select all even if some of its some menu items are not checked?!):
checked = true;
$(".all").click(function() {
checked = !checked;
var selectid = this.id.replace(/ /g, '');
console.log("====>>>" + selectid);
var item = `${selectid}-item`;
console.log("===<<<" + item)
var checkElements = $(`.${selectid}-item`).prop('checked', checked);
$(selectid + "-item").prop('checked', !checked);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post">
<table class="report">
<br />
<tr>
<th colspan='2'></th>
<th colspan='2'></th>
<th colspan='2'></th>
</tr>
<tr>
<th colspan='2'>Cats</th>
<th colspan='2'>Available</th>
<th colspan='2'><input id="Cats" class="all" type="checkbox" checked="true" /> </th>
</tr>
<tr>
<td colspan='2'>Cat 1</td>
<td colspan='2'><input name="Cats,cat1" class="Cats-item" type="checkbox" checked="true" /></td>
</tr>
<tr>
<td colspan='2'>Cat 2</td>
<td colspan='2'><input name="Cats,cat2" class="Cats-item" type="checkbox" checked="true" /></td>
</tr>
<tr>
<td colspan='2'>Cat 3</td>
<td colspan='2'><input name="Cats,cat3" class="Cats-item" type="checkbox" checked="true" /></td>
</tr>
</table>
<table class="report">
<br />
<tr>
<th colspan='2'></th>
<th colspan='2'></th>
<th colspan='2'></th>
</tr>
<tr>
<th colspan='2'>Dogs</th>
<th colspan='2'>Available</th>
<th colspan='2'><input id="Dog Big" class="all" type="checkbox" checked="true" /> </th>
</tr>
<tr>
<td colspan='2'>Dog 1</td>
<td colspan='2'><input name="Dogs,dogs1" class="Dog Big-item" type="checkbox" checked="true" /></td>
</tr>
<tr>
<td colspan='2'>Dog 2</td>
<td colspan='2'><input name="Dogs,dogs2" class="Dog Big-item" type="checkbox" checked="true" /></td>
</tr>
<tr>
<td colspan='2'>Dog 3</td>
<td colspan='2'><input name="Dogs,dogs3" class="Dog Big-item" type="checkbox" checked="true" /></td>
</tr>
</table>
<input type="submit" value="Save Setting" style="margin-top:20px; margin-left:0;">
</form>

I had to normalise your classes. They were not consistent. Don't have spaces in IDs (I got rid of the ID from all)
and do not have spaces between classNames that mean something when taken together
const checkAll = () => {
$(".all").each(function() {
const subClass = $(this).data("class");
const $sub = $("." + subClass+"-item");
$(this).prop("checked", $sub.length === $sub.filter(":checked").length)
})
};
$(function() {
checkAll(); //on load
$(".all").on("click", function() {
const $sub = $("." + $(this).data("class")+"-item");
const checked = this.checked;
$sub.prop('checked', checked);
})
$(".item").on("click", checkAll)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post">
<table class="report">
<br />
<tr>
<th colspan='2'></th>
<th colspan='2'></th>
<th colspan='2'></th>
</tr>
<tr>
<th colspan='2'>Cats</th>
<th colspan='2'>Available</th>
<th colspan='2'><input data-class="Cat" class="all" type="checkbox" checked="true" /> </th>
</tr>
<tr>
<td colspan='2'>Cat 1</td>
<td colspan='2'><input name="Cats,cat1" class="item Cat-item" type="checkbox" checked="true" /></td>
</tr>
<tr>
<td colspan='2'>Cat 2</td>
<td colspan='2'><input name="Cats,cat2" class="item Cat-item" type="checkbox" checked="true" /></td>
</tr>
<tr>
<td colspan='2'>Cat 3</td>
<td colspan='2'><input name="Cats,cat3" class="item Cat-item" type="checkbox" checked="true" /></td>
</tr>
</table>
<table class="report">
<br />
<tr>
<th colspan='2'></th>
<th colspan='2'></th>
<th colspan='2'></th>
</tr>
<tr>
<th colspan='2'>Dogs</th>
<th colspan='2'>Available</th>
<th colspan='2'><input data-class="Dog_Big" class="all" type="checkbox" checked="true" /> </th>
</tr>
<tr>
<td colspan='2'>Dog 1</td>
<td colspan='2'><input name="Dogs,dogs1" class="item Dog_Big-item" type="checkbox" checked="true" /></td>
</tr>
<tr>
<td colspan='2'>Dog 2</td>
<td colspan='2'><input name="Dogs,dogs2" class="item Dog_Big-item" type="checkbox" checked="true" /></td>
</tr>
<tr>
<td colspan='2'>Dog 3</td>
<td colspan='2'><input name="Dogs,dogs3" class="item Dog_Big-item" type="checkbox" checked="true" /></td>
</tr>
</table>
<input type="submit" value="Save Setting" style="margin-top:20px; margin-left:0;">
</form>

Select all checkboxes under tbody not working

I'm not sure why this jquery is not working. What I want is pretty straightforward: selecting all check boxes under the region. Could someone help tell why it's not working?
$(function(){
$('.select_all').change(function() {
var checkthis = $(this);
var checkboxes = $(this).next('tbody').find('.region_ct');
if(checkthis.is(':checked')) {
checkboxes.attr('checked', true);
} else {
checkboxes.attr('checked', false); }
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
<tr>
<th colspan=2>Americas</th>
</tr>
<tr>
<td colspan=2><input type="checkbox" name="region_am_all" class="select_all" value="X" /> Select All</td>
</tr>
<tbody>
<tr>
<td><input type="checkbox" class="region_ct" value="X" /> Argentina</td>
<td class="center"></td>
</tr>
<tr>
<td><input type="checkbox" class="region_ct" value="X" /> Barbados</td>
<td class="center"></td>
</tr>
</tbody>
<tr>
<th colspan=2>Asia</th>
</tr>
...
</table>

There are a couple of issues there:
I would strongly recommend against intermixing tr and tbody elements. If you're going to use tbody (and you should), use it consistently. Browsers may relocate tr elements into generated tbody elements.
The element you're calling next on doesn't have a following sibling (at all, much less the one you're looking for). You have to traverse up the hierarchy to the tr (if you don't fix #1) or the tbody (if you do).
You don't use attr to set checked, you use prop; and you can use your existing checked boolean rather than if/else, giving is simply checkboxes.prop("checked", this.checked);
Example with updated tbodys, and I've added some countries in the Asia area to demonstrate that only the relevant checkboxes are checked:
$(function() {
$('.select_all').change(function() {
var checkthis = $(this);
var checkboxes = $(this).closest('tbody').next().find('.region_ct');
checkboxes.prop("checked", this.checked);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
<tbody>
<tr>
<th colspan=2>Americas</th>
</tr>
<tr>
<td colspan=2>
<input type="checkbox" name="region_am_all" class="select_all" value="X" />Select All</td>
</tr>
</tbody>
<tbody>
<tr>
<td>
<input type="checkbox" class="region_ct" value="X" />Argentina</td>
<td class="center"></td>
</tr>
<tr>
<td>
<input type="checkbox" class="region_ct" value="X" />Barbados</td>
<td class="center"></td>
</tr>
</tbody>
<tbody>
<tr>
<th colspan=2>Asia</th>
</tr>
<tr>
<td colspan=2>
<input type="checkbox" name="region_am_all" class="select_all" value="X" />Select All</td>
</tr>
</tbody>
<tbody>
<tr>
<td>
<input type="checkbox" class="region_ct" value="X" />China</td>
<td class="center"></td>
</tr>
<tr>
<td>
<input type="checkbox" class="region_ct" value="X" />Vietnam</td>
<td class="center"></td>
</tr>
</tbody>
</table>
You might also consider putting the select_all inside the same tbody with the checkboxes, so you could do away with next.

tbody isn't sibing of .select_all. You need to use .closest() to select parent of .select_all and use .find() to select .region_ct in it. Also you don't need to use if/else to check/uncheck checkbox. Only set this.checked to checked attribute of checkbox using .prop().
$('.select_all').change(function() {
$(this).closest('table').find('.region_ct').prop('checked', this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
<tr>
<th colspan=2>Americas</th>
</tr>
<tr>
<td colspan=2><input type="checkbox" name="region_am_all" class="select_all" value="X" /> Select All</td>
</tr>
<tbody>
<tr>
<td><input type="checkbox" class="region_ct" value="X" /> Argentina</td>
<td class="center"></td>
</tr>
<tr>
<td><input type="checkbox" class="region_ct" value="X" /> Barbados</td>
<td class="center"></td>
</tr>
</tbody>
<tr>
<th colspan=2>Asia</th>
</tr>
</table>

Get all the values of td columns from table where checkbox is checked

I have a table as below:
..
There have been multiple questions asked for getting the values but in this case I should always have a parent item name. Suppose If a user selected only one subitem in "Shirts", then I should be able to get all the values from the selected tr and with that I need parent item name also i.e "shirts" and if some one clicks on all the subitems of a parent item, then all the values of all tr are need to be in some sort of array object on click of a "Save" button. I am trying hard to do this. Any help would be really appreciated. Though I have attached the HTML but this HTML is being generated at run time.
HTML:
<table>
<tr>
<td> </td>
<td> </td>
<td>Name</td>
<td>Sub Item</td>
<td>User Input</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chkGroup1" class="cls1" onclick="checkUncheckAll(this);" />
</td>
<td>Shirts
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="cls1" name="Group1" onclick="CheckCorrespondingHeader(this);" /></td>
<td> </td>
<td>Item1</td>
<td>SubItem1</td>
<td>
<input id="1datepicker" name="1datepicker" type="text" /><script>
</script></td>
</tr>
<tr>
<td>
<input type="checkbox" class="cls1" name="Group1" onclick="CheckCorrespondingHeader(this);" /></td>
<td> </td>
<td>Item2</td>
<td>SubItem2</td>
<td>
<input id="2datepicker" name="2datepicker" type="text" /><script>
</script></td>
</tr>
<tr>
<td>
<input type="checkbox" class="cls1" name="Group1" onclick="CheckCorrespondingHeader(this);" /></td>
<td> </td>
<td>Item3</td>
<td>SubItem3</td>
<td>
<input id="3datepicker" name="3datepicker" type="text" /><script>
</script></td>
</tr>
<tr>
<td>
<input type="checkbox" id="chkGroup2" class="cls2" onclick="checkUncheckAll(this);" />
</td>
<td>Jeans
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="cls2" name="Group2" onclick="CheckCorrespondingHeader(this);" /></td>
<td> </td>
<td>Item4</td>
<td>SubItem4</td>
<td>
<input id="4datepicker" name="4datepicker" type="text" /><script>
</script></td>
</tr>
<tr>
<td>
<input type="checkbox" class="cls2" name="Group2" onclick="CheckCorrespondingHeader(this);" /></td>
<td> </td>
<td>Item5</td>
<td>SubItem5</td>
<td>
<input id="5datepicker" name="5datepicker" type="text" /><script>
</script></td>
</tr>
<tr>
<td>
<input type="checkbox" class="cls2" name="Group2" onclick="CheckCorrespondingHeader(this);" /></td>
<td> </td>
<td>Item6</td>
<td>SubItem6</td>
<td>
<input id="6datepicker" name="6datepicker" type="text" /><script>
</script></td>
</tr>
</table>
Script code looks like below:
<script>
function checkUncheckAll(sender) {
var chkElements = document.getElementsByClassName(sender.className);
for (var i = 0; i < chkElements.length; i++) {
chkElements[i].checked = sender.checked;
}
}
function CheckCorrespondingHeader(sender) {
ControlLength = $("[name='" + sender.name + "']").length;
var countchecks = 0;
$("[name='" + sender.name + "']").each(function () {
if ($(this).prop('checked') == true) {
countchecks = countchecks + 1;
}
});
if (ControlLength == countchecks) {
$("#chk" + sender.name).attr('checked', 'checked');
}
else {
$("#chk" + sender.name).prop('checked', false);
}
}
function PickAllCheckedRows() {
}
</script>

As far as I can tell your code should work if you fix one issue. You are determining the number of sub rows that need to be checked to make the header row be checked using $("[name='" + sender.name + "']").length;. But unless I'm mistaken sender.name is never set. Of course if you set it this still won't work because your each function will include the header row. There are several solutions to this but I would recommend using a data attribute instead of the name attribute like so:
Markup:
<table>
<tr>
<!-- head -->
<td><input type="checkbox" data-head-for-group="Group1" ... /></td>
</tr>
<tr>
<!-- row 1 -->
<td><input type="checkbox" data-in-group="Group1" ... /></td>
</tr>
<tr>
<!-- row 2 -->
<td><input type="checkbox" data-in-group="Group1" ... /></td>
</tr>
<tr>
<!-- head -->
<td><input type="checkbox" data-head-for-group="Group2" ... /></td>
</tr>
<tr>
<!-- row 3 -->
<td><input type="checkbox" data-in-group="Group2" ... /></td>
</tr>
</table>
Script:
function CheckCorrespondingHeader(sender) {
var group = $("[data-in-group='" + sender.data('headForGroup') + "']");
var groupSize = group.length;
var countchecks = 0;
group.each(function () {
if ($(this).prop('checked') === true) {
countchecks = countchecks + 1;
}
});
if (groupSize === countchecks) {
$(sender).attr('checked', 'checked');
} else {
$(sender).prop('checked', false);
}
}

Javascript to Disable checkboxes in a table with variable rows

I have a table which can have variable # of rows. how can I disable all checkboxes at once?
<table border="1" class="myTable grid">
<tr align="center">
<td> </td>
<td>A</td>
</tr>
<tr align="center">
<td>1</td>
<td><input type="checkbox" name="cb1;1" value="1"></td>
</tr>
<td>2</td>
<td><input type="checkbox" name="cb2;1" value="1" checked></td>
</tr>
<tr align="center">
</table>

Here is a javascript only solution that disables all checkboxes in myTable.
document.getElementByClassName("myTable").querySelectorAll("input[type='checkbox']").disabled = true;

A jQuery solution would be:
$('.myTable input[type=checkbox]').attr('disabled', 'disabled');
Alternatively:
document.querySelectorAll('.myTable input[type=checkbox]').disabled = true;

Try utilizing a for loop to iterate NodeList returned by document.querySelectorAll(selectors) , set each [type=checkbox] element to disabled within for statement
var inputs = document.querySelectorAll("[type=checkbox]");
for (var i = 0; i < inputs.length; i++) {
inputs[i].disabled = true;
}
<table border="1" class="myTable grid">
<tbody>
<tr align="center">
<td> </td>
<td>A</td>
</tr>
<tr align="center">
<td>1</td>
<td>
<input type="checkbox" name="cb1;1" value="1">
</td>
</tr>
<td>2</td>
<td>
<input type="checkbox" name="cb2;1" value="1" checked>
</td>
</tr>
<tr align="center">
</tbody>
</table>

Enabled/disabled buttons when one checkbox or more are checked

To do this, I have a javascript file that count how many checkboxes in my form are checked, then:
if nothing is checked, these buttons: Change, delete, reset password will be disabled.
if one is checked, those will be all enabled.
if two or more is checked, Change will be disabled, the rest will still be enabled.
But in reality all of them stay disabled no matter what I do, so I wonder what I did wrong here.
Here is my code:
html:
<form action="" name="tform" method="POST">
<table>
<tr>
<td colspan="2">
</td>
<td colspan="3" align="right">
<input type="text" name="search_value" size="35"/><input type="submit" name="Search_clicked" value="Search"/>
</td>
</tr>
<tr>
<td colspan="5">
<table class="sortable" id="sortable_example" border="2">
<tr>
<th class="unsortable">Select</th>
<th>UserID</th>
<th>User name</th>
<th>Enable/Disable</th>
<th>Start date</th>
<th>End date</th>
</tr>
<tr>
<td><input type="checkbox" name="userid[]" value="1"/></td>
<td>00001</td>
<td>trang</td>
<td>Enable</td>
<td>dd/mm/YYYY</td>
<td>dd/mm/YYYY</td>
</tr> <tr>
<td><input type="checkbox" name="userid[]" value="11"/></td>
<td>00011</td>
<td>trangnt00914#fpt.edu.vn</td>
<td>Enable</td>
<td>dd/mm/YYYY</td>
<td>dd/mm/YYYY</td>
</tr> <tr>
<td><input type="checkbox" name="userid[]" value="12"/></td>
<td>00012</td>
<td>apgs1104#gmail.com</td>
<td>Enable</td>
<td>dd/mm/YYYY</td>
<td>dd/mm/YYYY</td>
</tr> <tr>
<td><input type="checkbox" name="userid[]" value="13"/></td>
<td>00013</td>
<td>congchua_cambuagietchim#yahoo.</td>
<td>Enable</td>
<td>dd/mm/YYYY</td>
<td>dd/mm/YYYY</td>
</tr> <tr>
<td><input type="checkbox" name="userid[]" value="14"/></td>
<td>00014</td>
<td>apgs1234#gmail.com</td>
<td>Enable</td>
<td>dd/mm/YYYY</td>
<td>dd/mm/YYYY</td>
</tr> <tr>
<td><input type="checkbox" name="userid[]" value="15"/></td>
<td>00015</td>
<td>apgs1104#yahoo.com</td>
<td>Enable</td>
<td>dd/mm/YYYY</td>
<td>dd/mm/YYYY</td>
</tr> <tr>
<td><input type="checkbox" name="userid[]" value="16"/></td>
<td>00016</td>
<td>trang1104#gmail.com</td>
<td>Enable</td>
<td>dd/mm/YYYY</td>
<td>dd/mm/YYYY</td>
</tr>
</table>
</td>
</tr>
<tr height="100px">
<td><input type="submit" name="Add_clicked" value="Add"/></td>
<td><input type="submit" name="Add_massively_clicked" value="Add massively"/></td>
<td><input type="submit" name="Change_clicked" disabled value="Change"/></td>
<td><input type="submit" name="Delete_clicked" disabled onclick="return confirm('Are you sure?');" value="Delete"/></td>
<td><input type="submit" name="Reset_password_clicked" disabled onclick="return confirm('Are you sure?');" value="Reset password"/></td>
</tr>
</table>
</form>
and javascript:
var obj;
var count=0;
var Change = document.getElementsByName('Change_clicked')[0];
var Delete = document.getElementsByName('Delete_clicked')[0];
var Reset_password = document.getElementsByName('Reset_password_clicked')[0];
for (var i=0; i<tform.elements.length; i++) {
obj = tform.elements[i];
if (obj.type == "checkbox" && obj.checked) {
count++;
}
}
if(count==0){
Change.disabled=true;
Delete.disabled=true;
Reset_password.disabled=true;
}
if(count==1){
Change.disabled=false;
Delete.disabled=false;
Reset_password.disabled=false;
}
if(count>1){
Change.disabled=true;
Delete.disabled=false;
Reset_password.disabled=false;
}
Thank you for any help!

Your code is fine, the only thing you missed to wrap it to a function and add an event handler.
1) Using onchange event handler, for your checkboxes
example:
<input type="checkbox" onchange="fun()" name="userid[]" value="1"/>
2) Wrap your code to a function like
function fun() {
//add your code
}
See it is working in this JSFiddle

Try instead of using:
<input type="submit" name="Change_clicked" disabled value="Change"/>
just:
<input type="submit" name="Change_clicked" value="Change"/>
for each button and then on document.ready and onclick() event within a checkbox check the amount of enabled check boxes. Then apply your settings from your function.
Also instead of using
var Change = document.getElementsByName('Change_clicked')[0];
just use ids with your elements because they are present only once:
var Change = document.getElementsById('Change_clicked');
Edit: instead of onclick() trigger the function by onChange(), kudos to #Praveen