Develop Reference

check all checkboxes doesn't work , asp.Net MVC

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);
}
});

Get values of selected tr in jquery

I have a table and it contains data with checkboxes in each row. When any of the checkboxes is checked, I add theSelected class to the corresponding tr element.
$('#InventoryTable tbody').on('click', 'input[type="checkbox"]', function (e) { /** logic */ });
But I am facing the issue below, when getting the selected tr element on button click.
This is the code I am using to get the seletced tr values:
function myFunc() {
debugger;
var table = $('#InventoryTable').DataTable();
var adjustmentdetails = new Array();
$("#InventoryTable tr.selected").each(function (ix, element) {
// Do your processing.
debugger;
});
}
However, I am not able to get other page(Pagination) selected values using above code.

just convert this code into function
function clickcheck(e){
{ //logic });
}
and apply this function on your checkbox onclick attr and pass event on this function

Here is one way of doing it, I assume the add class function is working for you, then use a button on click get all element with type=checkbox and it is input element with class selected. then print this value (put your logic here)
$('input[type=checkbox]').on('click', function(e) {
if (this.checked) {
$(this).addClass('selected');
} else {
$(this).removeClass('selected');
}
});
$('#getAllCheckedValue').on('click', function() {
console.log('----------- getAllCheckedValue ----------------');
$("input.selected[type=checkbox]").each(function(ix, element) {
console.log('Checked-->' + $(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="InventoryTable">
<tbody>
<tr>
1<input type="checkbox" value="1" class="test test2">
</tr>
<tr>
2<input type="checkbox" value="2">
</tr>
<tr>
3<input type="checkbox" value="3">
</tr>
</tbody>
</table>
<button id="getAllCheckedValue">
Get All Checked Value
</button>

how to do select all when selected a checkbox

i have a table where i am filling some data and have checkboxes besides each and the last check box is "ALL".
When i check this "ALL" checkbox remaining check boxes should be checked and vice versa.
code for filling data.
<div class="tablecontatiner">
<table>
<tr>
<th>Function</th>
<th>Add</th>
<th>Edit</th>
<th>View</th>
<th>Delete</th>
<th>All</th>
</tr>
#foreach (var item in Model)
{
<tr class="grouprow">
<td><input type="hidden"/><input id="#(item.Func_Code)" type="checkbox" style="visibility:hidden" />#item.FunctionName</td>
<td><input id="#(item.Func_Code + "A")" type="checkbox" value="Add" #(item.Add==true?"checked":"") /></td>
<td><input id="#(item.Func_Code + "E")" type="checkbox" value="Edit" #(item.Edit==true?"checked":"") /></td>
<td><input id="#(item.Func_Code + "V")" type="checkbox" value="View" #(item.View==true?"checked":"")/></td>
<td><input id="#(item.Func_Code + "D")" type="checkbox" value="Delete" #(item.Delete==true?"checked":"")/></td>
<td><input id="#(item.Func_Code + "ALL")" type="checkbox" value="All"/></td>
</tr>
}
</table>
</div>
and my UI looks like :

Try this
$('#checkboxAll').on('change', function () {
$(this).closest('.grouprow').find(':checkbox').not(this).prop('checked', this.checked);
});
$('table tr input:checkbox:not("#checkboxAll")').on('change', function () {
if (!this.checked) {
$('#checkboxAll').prop('checked', false);
}
});
DEMO

Try
jQuery(function ($) {
//listen to the change of checkbox in the last td
$('.tablecontatiner td:last-child input').on('change', function () {
//update the checked property of all checkboxes in the same row as the changed checkbox
$(this).closest('tr').find('input[type="checkbox"]').not(this).prop('checked', this.checked);
})
})

Try,
$('#chkAll').on('click', function () {
$(this).closest('.grouprow').find(':checkbox').not(this).prop('checked', this.checked);
});

Anton's solution is very elegant.
If you load (or reload) the table and don't want to set the event handlers each time it is reloaded, then I would change a bit the solution:
$('.tablecontatiner').on('change', '[id$=All]', function () {
$(this).closest('.grouprow').find('input').not(this).prop('checked', this.checked);
});
Remark: Also I would give "checkboxAll" class to each "ALL" checkbox, so it will look like:
<input id="#(item.Func_Code + "ALL")" type="checkbox" value="All" class="checkboxAll"/>
and then the code above will be:
$('.tablecontatiner').on('change', '.checkboxAll', function () {
$(this).closest('.grouprow').find('input').not(this).prop('checked', this.checked);
});
http://jsbin.com/jetewayi/1/edit

line-through a row in table if the checkbox is disabled

I have a table where each row contains document name and there's a checkbox at the start of each row. Some checkboxes are disabled. I want to add text-decoration:line-through to that row so that user can easily identify that, that row can't be selected because checkbox is disabled. How can this be done using JavaScript or jQuery?
In below example the row with Doc name 2 should be line-through.
<tr>
<td>
<input type="checkbox" name="doclist" id="someId" value="someId" onchange="updateList('someId')">Doc name 1
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="doclist" id="AnotherId" value="AnotherId" onchange="updateList('AnotherId')" disabled>Doc name 2
</td>
</tr>
I tried the below.
$('input[type="checkbox"]').filter(function() {
var disabledRow = this.disabled;
disabledRow.addClass("lineThrough");
});
CSS
.lineThrough{
text-decoration:line-through;
}

DEMO
$('table tr td input[type="checkbox"]').each(function(){
if($(this).prop('disabled')){
$(this).parents('tr').css('text-decoration','line-through');
}
});
if you want to work with class
$('table tr td input[type="checkbox"]').each(function () {
if ($(this).prop('disabled')) {
$(this).parents('tr').addClass('lineThrough');
}
});
As Suggested by UweB
.closest('tr') is faster than .parents('tr')
$('table tr td input[type="checkbox"]').each(function () {
if ($(this).prop('disabled')) {
$(this).closest('tr').addClass('lineThrough');
}
});

$('input[type="checkbox"]:disabled').parent().addClass('lineThrough');

Select all checkbox not working

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>