I have a view like below
<input type="checkbox" id="checkall" name="check_all"/><span>Check All</span>
<table class="table">
<tr>
<th>Selected</th>
<th>Name</th>
</tr>
#foreach (School.Data.ViewModels.Student item in Model.StudentDetails)
{
<tr>
<th>#Html.CheckBoxFor(modelitem => item.IsChecked, new { #onclick = "studentChecked(this);", #name="checked1", #class="idrow" }) </th>
<th> #Html.DisplayFor(modelitem => item.Name)</th>
</tr>
}
</table>
<script>
$(document).on(' change', 'input[name="check_all"]', function () {
$('.idRow').prop("checked1", this.checked);
});
</script>
I have one checkbox by the name "check_all". When I select this checkbox all checkboxes in the table must be selected. How can I do this?.
I have seen this page http://jsfiddle.net/GW64e/, but still didn't work. please help :)
Below code will check all the checkbox
$("#checkall").click(function () {
$(".idrow").attr('checked', this.checked);
});
Below code will uncheck and check 'check all' checkbox based on selection
$(".idrow").click(function() {
if (!this.checked) {
$("#checkall").attr('checked', false);
}
else if ($(".idrow").length == $(".idrow:checked").length) {
$("#checkall").attr('checked', true);
}
});
Related
On the view of my ASP.NET MVC 5 Application, I have two tables, Each row in the tables has a checkbox which is dynamically generated.
I am trying to add Check All / Uncheck All functionality for both the tables.
Following are two checkboxes:
<input id="ALL" class="CheckAll" type="checkbox" value="All" /><b>Select / Unselect All</b>
<input id="ALLt2" class="CheckAllt2" type="checkbox" value="All" /><b>Select / Unselect All</b>
Following is the relevant HTML Code:
<table class="table" id="hostsTable">
<thead>
<tr>
<th>FQ</th>
<th>Name</th>
<th>Select?</th>
</tr>
</thead>
<tr>
<td>
VISIBLE FQ VALUE
</td>
<td>
VISIBLE NAME
</td>
<td>
<input Style="vertical-align:3px}" data-val="true" data-val-required="The Checked field is required." id="Hosts_0__Checked" name="Hosts[0].Checked" type="checkbox" value="true" /><input name="Hosts[0].Checked" type="hidden" value="false" />
</td>
</tr>
</table>
The Structure of both the table is same and ID of second one is countersTable
Following is my jQuery:
$('.CheckAll').on('change', function () {
$(this).parent().parent().find('input[type=checkbox]').prop('checked', this.checked);
});
//$('table tr input:checkbox:not(".CheckAll")').on('change', function () {
$('#hostsTable tr input:checkbox:not(".CheckAll")').on('change', function () {
if (!this.checked) {
$(this).parent().parent().find('.CheckAll').prop('checked', false);
}
var flag = true;
$(this).parent().parent().children().find('input[type=checkbox]:not(.CheckAll)').each(function () {
if (!this.checked) {
flag = false;
}
});
if (flag) {
$(this).parent().parent().find('.CheckAll').prop('checked', true);
}
});
$('.CheckAllt2').on('change', function () {
$(this).parent().parent().find('input[type=checkbox]').prop('checked', this.checked);
});
//$('table tr input:checkbox:not(".CheckAll")').on('change', function () {
$('#countersTable tr input:checkbox:not(".CheckAllt2")').on('change', function () {
if (!this.checked) {
$(this).parent().parent().find('.CheckAllt2').prop('checked', false);
}
var flag = true;
$(this).parent().parent().children().find('input[type=checkbox]:not(.CheckAllt2)').each(function () {
if (!this.checked) {
flag = false;
}
});
if (flag) {
$(this).parent().parent().find('.CheckAllt2').prop('checked', true);
}
});
When I click on either of the Select / Unselect All checkbox, the checkboxes from both the tables get Checked / Unchecked.
How Can I restrict this to respective tables?
Thanks In Advance
I assume that you select the wrong element when calling $.parent().parent(). If you grab an element that both tables are children of, all input[type="checkbox"] will be selected, obviously.
Since you have different classes for both checkboxes, try to instead of selecting by $.parent().parent(), just using the # id selector for the relevant table.
I.e. change this:
$(this).parent().parent().find('input[type=checkbox]').prop('checked', this.checked);
to
$("#hostsTable").find('input[type=checkbox]').prop('checked', this.checked);
for the first table, and with #counterTable for the second one.
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...
I have HTML page which have multiple check boxes and individually they can be checked. I have button select, so what I am suppose to do is. When I click on select all the check boxes should get selected, and deselected.
Html
<html>
<head>
<script src="jquery.js"></script>
</head>
<body>
<script>
$(document).ready(function() {
$('#selectAll').click(function(event) { //on click
if(this.checked) { // check select status
$('.btn-chk').each(function() { //loop through each checkbox
this.checked = true; //select all checkboxes with class "checkbox1"
});
}else{
$('.btn-chk').each(function() { //loop through each checkbox
this.checked = false; //deselect all checkboxes with class "checkbox1"
});
}
});
});
</script>
<table id="example" cellspacing="0" width="20%">
<thead>
<tr>
<th><button type="button" id="selectAll" class="myClass">Select</button></th>
<th>number</th>
<th>company</th>
<th> Type</th>
<th> Address</th>
<th>Code</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="button-checkbox">
<button type="button" class="btn-chk" data-color="success"></button>
<input type="checkbox" class="hidden" />
</span>
</td>
<td>1</td>
<td>APPLE</td>
<td>IT</td>
<td>San Jones</td>
<td>US</td>
</tr>
<tr>
<td><span class="button-checkbox">
<button type="button" class="btn-chk" data-color="success"></button>
<input type="checkbox" class="hidden" />
</span>
</td>
<td>2</td>
<td>DELL</td>
<td>IT</td>
<td>San Jones</td>
<td>US</td>
</tr>
<tr>
<td><span class="button-checkbox">
<button type="button" class="btn-chk" data-color="success"></button>
<input type="checkbox" class="hidden" />
</span>
</td>
<td>3</td>
<td>Amazon</td>
<td>IT</td>
<td>San Jones</td>
<td>US</td>
</tr>
<tr>
<td><span class="button-checkbox">
<button type="button" class="btn-chk" data-color="success"></button>
<input type="checkbox" class="hidden" />
</span>
</td>
<td>4</td>
<td>Microsoft</td>
<td>IT</td>
<td>San Jones</td>
<td>US</td>
</tr>
</tbody>
</body>
</html>
Output
In the image I have select button. what I want is when I click on select button all the check boxes should get selected
If you want to toggle the checkbox state, you can do like this
var chkd = true;
$('#selectAll').click(function(event) {
$(":checkbox").prop("checked", chkd);
chkd = !chkd;
});
Fiddle
#selectAll is a button, it doesn't have a checked property, but one could emulate that with a data attribute instead.
Secondly, .btn-chk isn't a checkbox either, so it can't be checked, you have to target the checkboxes
$(document).ready(function() {
$('#selectAll').click(function(event) {
var checked = !$(this).data('checked');
$('.btn-chk').next().prop('checked', checked);
$(this).data('checked', checked);
});
});
FIDDLE
An simple way is like below:
$(function() {
$('#selectAll').click(function() {
$(':checkbox').prop('checked', !$(':checkbox').prop('checked'));
});
});
The Demo.
Check this jsFiddle
$(document).ready(function() {
$('#selectAll').click(function() {
$(':checkbox').prop('checked', !$(':checkbox').prop('checked'));
});
});
You can simply use it
For more info on jQuery visit w3schools-jquery
Change your jQuery code to
$('#selectAll').click(function(event) { //on click
if($('.hidden').prop('checked') == false) { // check select status
$('.hidden').each(function() { //loop through each checkbox
this.checked = true; //select all checkboxes with class "checkbox1"
});
}else{
$('.hidden').each(function() { //loop through each checkbox
this.checked = false; //deselect all checkboxes with class "checkbox1"
});
}
});
This will toggle between checked and unchecked of the checkboxes when you click the button.
inside the "click" function "this" is button and not a checkbox. and button property checked is underfined.
"$('.btn-chk').each" - is loop on each element with class ".btn-chk", in your HTML is buttons and not an checkboxes.
in your context the "#selectAll" must be a checkbox and put class '.btn-chk' on your checkboxes
Try this-
var checked = true;
$('#selectAll').click(function(event) {
$('table tr').each(function( index ) {
$(this).find('input[type="checkbox"]').prop(checked, true);
});
checked = !checked;
});
You can do it like this also with ':checkbox' selector.
$(document).ready(function () {
$('#selectAll').on('click', function () {
$(':checkbox').each(function () {
$(this).click();
});
});
});
This will definitely works.
$("#selectAll").click(function(){
var checked = !$(this).data('checked');
$('.btn-chk').prop('checked', checked);
$(this).data('checked', checked);
});
I implement table with paging.
Here the code to create table:
<table id="ContactsTable" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>
#Html.CheckBox("chkBoxAllEmails", new { onclick = "SelectAllEmails(this);" })
</th>
<th>
First Name
</th>
<th>
Last Name
</th>
<th>
Email
</th>
</tr>
</thead>
#foreach (UserContact item in ViewBag.Contacts)
{
<tr>
<td>
<input id = "#(("chkbox" + index++).ToString())" name="chboxEmail" type="checkbox" value = "#item.email" onclick="SelectEmail(this); " />
</td>
<td>
#item.firstName
</td>
<td>
#item.lastName
</td>
<td>
#item.email
</td>
</tr>
}
</table>
Here is the code that create paging in the table:
<script>
$(document).ready(function () {
$('#ContactsTable').dataTable();
});
</script>
And here is how this table looks:
As you can see table contain checkbox column. When I check the header of the checkbox column
all the checkbox have to be selected.Here is the JS code that implements it:
function SelectAllEmails(chboxSelectAllElements) {
var chboxEmailsArray = document.getElementsByName("chboxEmail");
if (chboxSelectAllElements.checked) {
for (var i = 0; i < chboxEmailsArray.length; i++) {
chboxEmailsArray[i].checked = true;
}
}
else {
for (var i = 0; i < chboxEmailsArray.length; i++) {
chboxEmailsArray[i].checked = false;
}
}
}
And here is how it's looks after I check the header of the checkbox:
But when I select second page in paging, turn out that the checkboxes not checked:
i.e checkboxes will only work on current pagination page.
My question is why not all checkboxes selected?
I need to check or uncheck all checkboxes when the checkbox in the header checked or unchecked , any idea or examples how can I implement it in my example?
Thank you in advance.
Use on :
$(document).on('change', 'input[name="chboxEmail"]', function(e) {
$('input:checkbox').not(this).prop('checked', this.checked);
});
Than use the .on() method to delegate the click event to future elements added to the DOM
I have been using bootstrap tables to fetch data from database using kendo datasource. So in order to make it more interactive i have used a checkbox for simultaneous actions.
I want to delete all the entries with one checkbox. I have read about deleting entries with single checkbox using jQuery. But problem is that I have only one checkbox in table and all the entries are being fetched using kendo data source.
If i am creating confusion then see here-
<script id="template" type="text/x-kendo-template">
<tr>
<td>
<input type="checkbox" class="done" data-id="#= CID #" ></input>
</td></tr>
</script>
<table>
<tr>
<th style="width:10%;">
<input type="checkbox" />
</th>
</tr>
</table>
Now with using kendo datasource i have one column of checkboxes only.
So i am doing this-
<script type="text/javascript">
$('.done').click(function (event) {
if (this.checked) {
// Iterate each checkbox
$(':checkbox').each(function () {
this.checked = true;
});
}
});
</script>
And still no result. Help!
Try to wrap your jQuery code inside $(document).ready(function(){}); or $(function(){}); to let it see the whole DOM:
$(document).ready(function() {
$('.done').click(function (event) {
if (this.checked) {
// Iterate each checkbox
$(':checkbox').each(function () {
this.checked = true;
});
}
});
});
Also, your HTML are wrapped inside the script tag, move it outside and remove redundant ' as well as the input tag doesn't need a closing </input> tag:
<tr>
<td>
<input type="checkbox" class="done" data-id="#= CID #" />
</td>
</tr>
<script type="text/javascript">
$(document).ready(function(){
$('.done').click(function (event) {
if ($(this).attr('checked')) {
$('input:checkbox:not(".done")').each(function () {
$(this).attr('checked', 'checked');
});
}
});
});
</script>
Try this. it may works
Try this:
$(function () {
$('.done').on('click', function(){
// i comment this condition if you want selectall for checked or unchecked
//if ($(this).is(':checked')){
$(':checkbox').prop('checked', this.checked);
//}
});
});
Just try this:
Script
$(document).ready(function(){
$('.done').click(function (event) {
$('.chkbxq').each(function () {
$(this).attr('checked', flag);
});
});
});
HTML:
<table>
<tr>
<th style="width:10%;">
<input type="checkbox" class="chkbxq" />
</th>
</tr>
</table>