Select/Deselect checkbox does not work after selectAll checkbox clicked

Select/Deselect checkbox does not work after selectAll checkbox clicked - javascript

I have a jquery datatable. One of its column consists of checkboxes as you can see here . Now, when I click the checkboxes on the rows they work fine. I mean it prints out one of the single select class checkbox is checked or one of the single select class checkbox is unchecked, since I added these on the event handler. However, if I click select all once, my individual checkboxes does not run anymore (it does not print out these messages).Select all checkboxes look like work fine. (selects all individual boxes). Here is my select all and single select checkbox related code :
SelectAll handler :
$('input[type="checkbox"][id="selectAll"]').click(function () {
if ($(this).prop("checked") == true) {
converter.checkAll(true);
} else if ($(this).prop("checked") == false) {
converter.checkAll(false);
}
});
checkAll function
Converter.prototype.checkAll = function (checktoggle) {
var data = (this.resultTable).fnGetData();
for (var i in data) {
var row = $('<div>' + data[i][3] + '</div> ');
row.children('input').attr('checked', (checktoggle) ? 'checked' : false);
row.children('input').attr('id', 'singleSelect');
console.log(row.html());
(this.resultTable).fnUpdate(row.html(), parseInt(i, 10), 3, false, false);
}
(this.resultTable).fnDraw();
}
Single Select Handler
$('input[type="checkbox"][id="singleSelect"]').click(function () {
alert("asdasdasdasd");
if ($(this).prop("checked") == true) {
alert('one of the single select class checkbox is checked');
} else if ($(this).prop("checked") == false) {
alert('one of the single select class checkbox is unchecked');
}
});

Use this mode
SelectAll handler :
// note change event
$('input[type="checkbox"][id="selectAll"]').change(function () {
converter.checkAll($(this).prop("checked"));
});
checkAll function
Converter.prototype.checkAll = function (checktoggle) {
var data = (this.resultTable).fnGetData();
for (var i in data) {
var row = $('<div>' + data[i][3] + '</div> ');
row.children('input').prop('checked', checktoggle) ;
row.children('input').attr('id', 'singleSelect');
console.log(row.html());
(this.resultTable).fnUpdate(row.html(), parseInt(i, 10), 3, false, false);
}
(this.resultTable).fnDraw();
}
Single Select Handler
$('input[type="checkbox"][id="singleSelect"]').change(function () {
alert("asdasdasdasd");
if ($(this).prop("checked") == true) {
alert('one of the single select class checkbox is checked');
} else if ($(this).prop("checked") == false) {
alert('one of the single select class checkbox is unchecked');
}
});

The issue appear to be
$('input[type="checkbox"][id="selectAll"]').click(function () {
is called on input with selector [id="selectAll"] ; js at post does not uncheck all checkboxes , but creates new input elements where checked attribute is set with argument checktoggle
so what should I do in order to fix this issue ?
Difficult to confirm without html included at Question . Try utilizing .each() , setting this.checked to true , false within callback
$('input[type="checkbox"][id="selectAll"]').click(function (e) {
$("input[type=checkbox]").each(function() {
if ($(e.target).prop("checked") == true) {
this.checked = true;
converter.checkAll(true);
} else {
this.checked = false;
converter.checkAll(false);
}
})
});

We can make check/uncheck jQuery datatable by using checkbox names of child rows.
<script type="text/javascript">
$(function () {
$("#chkAll").click(function () {
$("input[name='employees']").attr("checked", this.checked);
});
$('#example').DataTable({
});
});
</script>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th align="left"><input type="checkbox" id="chkAll" /></th>
<th>Name</th>
<th>Position</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="employees" /></td>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>$320,800</td>
</tr>
<tr>
<td><input type="checkbox" name="employees" /></td>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>$170,750</td>
</tr>
</tbody>
</table>
it works fine for more details http://www.infinetsoft.com/Post/How-to-check-all-rows-in-jQuery-datatables-grid/1255

Related

How to select all/unselect all the check boxes which are not disabled?

I've multiple checkbox inputs while some them are disabled. So when I click select all/unselect all the checkbox at the top, I want to apply this event for the only enabled check boxes. Also when I've all the checkboxes checked by clicking on each one, then the select all checkbox must be clicked.
Note : Also I've one functionality, when the enabled checkbox is clicked and followed by the save click, then that particular checkbox will be disabled.I can add a new checkbox using add new checkbox button. When a new checkbox is added the select all/unselect all checkbox must be unchecked.
HTML
<input type="checkbox" id="ckbCheckAll" /><span>Select all</span>
<table id="myTable">
<tr>
<td>
<input type="checkbox" class="checkBoxClass" disabled="disabled" checked/> <span>Option1</span></td>
</tr>
<tr>
<td>
<input type="checkbox" class="checkBoxClass" /> <span>Option2</span></td>
</tr>
<tr>
<td>
<input type="checkbox" class="checkBoxClass" /> <span>Option3</span></td>
</tr>
<tr>
<td>
<input type="checkbox" class="checkBoxClass" /> <span>Option4</span></td>
</tr>
<tr>
<td>
<input type="checkbox" class="checkBoxClass" /> <span>Option5</span></td>
</tr>
</table>
<button id="add">
Add check box
</button>
<button id="save">
Save
</button>
JQuery
$(document).ready(function() {
$("#ckbCheckAll").click(function() {
$(".checkBoxClass").prop('checked', $(this).prop('checked'));
});
});
$(document).ready(function() {
$('.checkBoxClass').click(function() {
var selected = $('.checkBoxClass').length;
if ($('.checkBoxClass:checked:enabled').length === selected) {
$('#ckbCheckAll').prop('checked', true);
} else {
$('#ckbCheckAll').prop('checked', false);
}
})
});
$(document).ready(function() {
count = 5;
$('#save').click(function() {
$('.checkBoxClass').each(function() {
if ($(this).is(':checked')) {
$(this).prop('disabled', true);
}
})
});
$('#add').click(function() {
count = count + 1;
$('#myTable').append('<tr><td><input type="checkbox" class="checkBoxClass" /> <span>Option'+count+'</span></td></tr>')
});
})
Fiddle

To detect disabled check boxes you can use jquery filter method like this:
$(".checkBoxClass").filter(function(){
return !$(this).attr('disabled');
}).prop('checked', $(this).prop('checked'));
by using filter like this, JQuery changes checkboxes that have not disabled attribute.
and use .prop('checked', false) or .attr('checked', false) to uncheck checkboxes on add new checkbox button.
so to uncheck select all on save and add checkbox use:
$("#ckbCheckAll").attr('checked', false);
and to uncheck all enabled checkboxes on addcheckbox use:
$(".checkBoxClass").filter(function(){
return !$(this).attr('disabled');
}).prop('checked', false);
You should also use $(document).on("click",".checkBoxClass",function(){}) binder to let JQuery bind click event for dynamically added checkboxes. by doing that and add some extra jquery, select all checkbox, checked when ever all checkboxes are checked.
Updated Fiddle

try this, it will get only enable checkobox and select/unselect them.
$(document).ready(function() {
$("#ckbCheckAll").click(function() {
$(".checkBoxClass:enabled").prop('checked', $(this).checked);
});
});
check fiddle
http://jsfiddle.net/p73wW/8/

Try this :
$(document).ready(function() {
$("#ckbCheckAll").click(function() {
var checked = false;
if($(this).prop('checked') == true) {
checked = true;
}
$("#myTable tbody tr").each(function() {
if($(this).find('.checkBoxClass').attr('disabled') != 'disabled') {
$(this).find(".checkBoxClass").prop('checked', checked);
}
});
});
$('.checkBoxClass').click(function() {
var i = 1;
var totalCheckboxes = $("#myTable tbody tr").length;
if($(this).prop('checked') == true) {
$("#myTable tbody tr").each(function() {
if($(this).find('.checkBoxClass').attr('disabled') != 'disabled') {
if($(this).find(".checkBoxClass").prop('checked') == true) {
i++;
}
}
});
}
if(i==totalCheckboxes) {
$("#ckbCheckAll").prop('checked', true);
} else {
$("#ckbCheckAll").prop('checked', false);
}
});
count = 5;
$('#save').click(function() {
$('.checkBoxClass').each(function() {
if ($(this).is(':checked')) {
$(this).prop('disabled', true);
}
});
$("#ckbCheckAll").prop('checked', false);
});
$('#add').click(function() {
count = count + 1;
$('#myTable').append('<tr><td><input type="checkbox" class="checkBoxClass" /> <span>Option'+count+'</span></td></tr>')
});
});
Updated Fiddle

Here is another method. Instead of using filter I have used :enabled. Also used on jquery to detect new added checkbox. Hope it will help you.
$(document).on('click','.checkBoxClass',function() {
var selected = $('.checkBoxClass:enabled').length;
if ($('.checkBoxClass:checked:enabled').length === selected) {
$('#ckbCheckAll').prop('checked', true);
} else {
$('#ckbCheckAll').prop('checked', false);
}
})
demo

check/uncheck boxes between tables using jQuery

If I have the following sample code:
<table id="table1">
<tr>
<td><input type="checkbox" id="first">first thing</td>
</tr>
</table>
<table id="table2">
<tr>
<td><input type="checkbox" id="second">second thing</td>
<td><input type="checkbox" id="third">third thing</td>
<td><input type="checkbox" id="fourth">fourth thing</td>
<td><input type="checkbox" id="fifth">fifth thing</td>
</tr>
</table>
I am trying to make such that if you uncheck the 'first thing' box, all other boxes uncheck as well (if they were checked). Also, want to include that if any of the boxes 2 through 5 are checked, then box 1 must be checked as well.

Uncheck all other boxes when first is unchecked:
$('#first').change(function() {
if ($(this).prop('checked') == false) {
$('#table2 input[type="checkbox"]').prop('checked', false);
}
});
Check the first box upon checking anything in table 2:
$('#table2 input[type="checkbox"]').change(function() {
if ($(this).prop('checked') == true) {
$('#first').prop('checked', true);
}
});
Fiddle here: https://jsfiddle.net/166gv8tc/

This solves your problem:
// by checking first check/unchecks all
$('#first').change(function() {
if ($(this).prop('checked') == true) {
$('#table2 input[type="checkbox"]').prop('checked', true);
} else if ($(this).prop('checked') == false) {
$('#table2 input[type="checkbox"]').prop('checked', false);
}
});
// if any checked check first
$('#table2 input[type="checkbox"]').change(function() {
if ($(this).prop('checked') == true) {
$('#first').prop('checked', true);
}
});
// if all checked check first, if none checked uncheck first
$('#table2 input[type="checkbox"]').change(function() {
var allchecked = true;
$('#table2 input[type="checkbox"]').each(function () {
console.log('check');
if ($(this).prop('checked') == false) {
allchecked = false;
}
});
if (allchecked) {
$('#first').prop('checked', true);
} else {
$('#first').prop('checked', false);
}
});
Fiddle: http://jsfiddle.net/ddan/go09n70n/1/

Checkbox .change() event doesn't fire, when "fired" by another checkbox

I'm using a checkbox to check all other checkboxes in a table.
After a checkbox being checked INSIDE the table (on change) I sum up every textbox value in the same tr.
It works well on Firefox and Chrome.
On IE11 and below (it's important for me that it works in EVERY browser) the first change of the "all" checkbox just tick the others, but doesn't sum up the textbox values.
On the second click he sums up but untick the checkboxes.
So it works in the wrong way because the first "change" is ignored or sth.
Sorry for my bad english and bad description.
<thead>
<tr>
<th>Auswahl <input type="checkbox" id="allcheck" /></th>
<th>Kunden-Nr.</th>
<th>Personal-Nr.</th>
<th>Vorname</th>
<th>Name</th>
<th>Gutscheintyp</th>
<th>Betrag €</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center"><input type="checkbox" name="check" /></td>
<td align="left">1</td>
<td align="left">2</td>
<td align="left">3</td>
<td align="left">4</td>
<td align="left" class="typ">5</td>
<td align="center" class="texttd">
<input type="text" class="txt" maxlength="5" onclick="this.select()" value="20.00" /></td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="5"></th>
<th colspan="1"">Summe</th>
<th colspan="1" id="sum">0,00</th>
</tr>
</tfoot>
allcheck is the id of the checkbox, checking all others. :)
// TICK ALL CHECKBOXES
$('#allcheck').click (function () {
var checkedStatus = this.checked;
$('table tbody').find('input[type="checkbox"]').each(function () {
$(this).prop('checked', checkedStatus);
});
});
// SUM UP TEXTBOXES IF CHECKBOX CHECKED
$('input[type="checkbox"]').change(function() {
var sum = 0.00;
$("table tr td input:checked").each(function(){
test = $(this).closest('tr').find('input[type="text"]').val();
test = test.replace( ",",".");
if (isNaN(test)) {
sum = 0.00;
}
sum += parseFloat(test, 10);
$("#sum").html(sum.toString().replace(".",","));
});
sum = parseFloat(sum, 10);
sum = sum.toFixed(2);
$("#sum").html(sum.toString().replace(".",","));
});
I hope these information are enough for you to help me a little. :)

Seems that changing "checked" property does not always trigger "change" event.
So you must move your sum calculation into separate function and call it explicitly in "#allcheck" click handler
(also cleaned your code a bit)
// TICK ALL CHECKBOXES
$('#allcheck').click (function () {
var checkedStatus = this.checked;
$('table tbody').find('input[type="checkbox"]').each(function () {
$(this).prop('checked', checkedStatus);
});
updateSum();
});
// SUM UP TEXTBOXES IF CHECKBOX CHECKED
$('tbody input[type="checkbox"]').change(updateSum);
function updateSum() {
var sum = 0.00;
$("tbody input:checked").each(function(){
var test = $(this).closest('tr').find('input[type="text"]').val();
var testNum = parseFloat(test.replace( ",", "."));
if (!isNaN(testNum)) {
sum += testNum;
}
});
$("#sum").text(sum.toFixed(2).replace(".",","));
}
JSFiddle

instead of click event use change event for all check checbox. on change will fire after changing to new value and this.checked will give you correct value :
$('#allcheck').change(function() {
var checkedStatus = this.checked;
$('table tbody').find('input[type="checkbox"]').each(function () {
$(this).prop('checked', checkedStatus);
});
});

JQuery To check all checkboxes in td based on classname of tr

here is my sample code
<table id="accessListTable">
<tr class="ui-grid groupHead">
<td><input type="checkbox" class="groupHeadCheck"/></td>
</tr>
<tr>
<td><input type="checkbox" id="1"/></td>
</tr>
<tr>
<td><input type="checkbox" id="2"/></td>
</tr>
<tr>
<td><input type="checkbox" id="3"/></td>
</tr>
<tr class="ui-grid groupHead">
<td><input type="checkbox" class="groupHeadCheck"/></td>
</tr>
<tr>
<td><input type="checkbox" id="4"/></td>
</tr>
</table>
E.g, When the checkbox in first row with class groupHeadCheck, all the checkboxex of id 1, 2 and 3 will also be checked.
And if all the checkboxes of 1, 2, and 3 are already checked, the checkbox in first row will be checked.
Please any help!

You can add a click handler to the group checkbox then inside the handler you can find its tr element and the tr's next sibling element till the next occurrence of tr.groupHead
$(function ($) {
$(".groupHeadCheck").on("click", function (event) {
$(this).closest('tr').nextUntil('tr.groupHead').find('input[type="checkbox"]').prop('checked', this.checked)
})
});
Demo: Fiddle

I am sure it can be done in a prettier manner, but this is the basic idea:
$("table tbody").on("change", "input[type=checkbox]", function (e) {
var currentCB = $(this);
var isChecked = this.checked;
if (currentCB.is(".groupHeadCheck")) {
var allCbs = currentCB.closest('tr').nextUntil('tr.groupHead').find('[type="checkbox"]');
allCbs.prop('checked', isChecked);
} else {
var allCbs = currentCB.closest('tr').prevAll("tr.groupHead:first").nextUntil('tr.groupHead').andSelf().find('[type="checkbox"]');
var allSlaves = allCbs.not(".groupHeadCheck");
var master = allCbs.filter(".groupHeadCheck");
var allChecked = isChecked ? allSlaves.filter(":checked").length === allSlaves.length : false;
master.prop("checked", allChecked);
}
});
and if you need to run the code to force the check all state
$(".groupHead").next().find("[type=checkbox]").change();
JSFiddle

This would check all if the first is checked (or uncheck all)
$(document).on('click', '.groupHeadCheck',function() {
$(this).closest('tr').nextUntil('tr.groupHead').find('input[type="checkbox"]').prop('checked', $(this).prop('checked'))
});
you could fiddle a bit with your classes (or IDs) to make it right for you

I know this is already answered, but I wanted a more generic way of doing this. In my case, I wanted to check all in a column until I hit a new group. I also had 3 columns with checkboxes. The ones in the first checkbox column all had names starting with "S_", the second "A_" and the third "C_". I used this to pick out the checkboxes I wanted. I also didn't name the heading checkboxes that were used to do the "check all" so it would stop when it hit the next groupings row.
You could use the class name to apply the same logic.
First, here is what a check all checkbox looked like:
<td>
<input type="checkbox" onchange="checkAll(this, 'S_');" />
</td>
Then the javascript function it calls when clicked:
function checkAll(sender, match)
{
var table = $(sender).closest('table').get(0);
var selector = "input[type='checkbox'][name^='" + match + "']";
for (var i = $(sender).closest('tr').index() + 1; i < table.rows.length; i++)
{
var cb = $(table.rows[i]).find(selector).get(0);
if (cb === undefined)
break;
if ($(cb).is(':enabled'))
cb.checked = sender.checked;
}
}
So it will search each subsequent row for a checkbox with the name starting with "S_". Only the checkboxes the user has rights to will be changed. I was going to use $(td).index() to find the right column, but this didn't work out because some rows had colspan's greater than 1.

How to select value of all the tbody inputs values using jQuery

so I have some checkboxes, when each one is checked I'm able to get the id number I need from the associated table row and place them into my contacts array.
I also have a Select all checkbox which is meant to grab all the id numbers and stick them into the same array.
Having a bit of trouble trying to figure out the correct syntax to target the tbody, select every table row's data-id, or every table row's input's value.
http://jsfiddle.net/leongaban/7LCjH/
^ In my fiddle example you can see the numbers get added to my array (or the gray div for visualization).
How would you grab all the id numbers from the tbody rows from the Select all checkbox?
jQuery
var contacts = [];
// add multiple select / deselect functionality
$("#selectall").click(function () {
$('.case').attr('checked', this.checked);
//contacts.push($('#tbody').children(tr > td > input).val();)
});
// if all checkbox are selected, check the selectall checkbox
// and viceversa
$(".case").click(function() {
var $tr = $(this).closest("tr");
var id = $tr.data('coworker-id');
contacts.push(id);
$('#arrayContent').empty();
$('#arrayContent').append(contacts+',');
if ($(".case").length == $(".case:checked").length) {
$("#selectall").attr("checked", "checked");
} else {
$("#selectall").removeAttr("checked");
}
});
HTML
<table>
<thead>
<tr>
<td><input type="checkbox" id="selectall"/></td>
<td>Select All</td>
</tr>
<tr>
<td colspan="2"><hr/></td>
</tr>
</thead>
<tbody id="tbody">
<tr data-coworker-id="1">
<td><input type="checkbox" class="case" name="case" value="1"/></td>
<td>1</td>
</tr>
<tr data-coworker-id="2">
<td><input type="checkbox" class="case" name="case" value="2"/></td>
<td>2</td>
</tr>
<tr data-coworker-id="3">
<td><input type="checkbox" class="case" name="case" value="3"/></td>
<td>3</td>
</tr>
</tbody>

You can modify your select all handler like so:
$("#selectall").click(function () {
$('.case').attr('checked', this.checked).each(function() {
contacts.push($(this).val())
});
});

Here is a working example:
var contacts = [];
// add multiple select / deselect functionality
$("#selectall").click(function () {
var els = $('.case')
if (els.first().is(':checked') ) {
els.prop('checked', false);
$('#arrayContent').empty();
} else {
els.attr('checked', true);
$.each(els, function(index, el) {
contacts.push( $(el).val() );
});
$('#arrayContent').empty();
$('#arrayContent').append(contacts.join( ', ' ) );
}
//contacts.push($('#tbody').children(tr > td > input).val();)
});
// if all checkbox are selected, check the selectall checkbox
// and viceversa
$(".case").click(function() {
var $tr = $(this).closest("tr");
var id = $tr.data('coworker-id');
contacts.push(id);
$('#arrayContent').empty();
$('#arrayContent').append(contacts+',');
if ($(".case").length == $(".case:checked").length) {
$("#selectall").attr("checked", "checked");
} else {
$("#selectall").removeAttr("checked");
}
});
and here is fiddle link :: http://jsfiddle.net/kkemple/7LCjH/24/

You can try this
$("#selectall").click(function () {
if($('.case:checked').length == $('.case').length){
//deselect all
$('.case').removeAttr("checked");
contacts = [];
}
else{
//select all
$('.case').attr("checked", "checked").each(function(){
var $tr = $(this).closest("tr");
var id = $tr.data('coworker-id');
contacts.push(id);
})
}
$('#arrayContent').empty();
$('#arrayContent').append(contacts.join(','));
//contacts.push($('#tbody').children(tr > td > input).val();)
});
jsFiddle

Use find instead of children and then loop the elements to add them to the array.
$("#selectall").click(function () {
$('.case').attr('checked', this.checked);
$('tbody').find("input").each(function () {
contacts.push($(this).val()+",");
});
$('#arrayContent').append(contacts);
});
The .find() and .children() methods are similar, except that the latter only travels a single level down the DOM tree.
Source: http://api.jquery.com/find/

I know this doesn't quite answer the question using children, but you can use $('#tbody').find('input') to find all the input fields within an element.

Develop Reference

JavaScript is the programming language of the Web.

Select/Deselect checkbox does not work after selectAll checkbox clicked - javascript

Related

How to select all/unselect all the check boxes which are not disabled?

check/uncheck boxes between tables using jQuery

Checkbox .change() event doesn't fire, when "fired" by another checkbox

JQuery To check all checkboxes in td based on classname of tr

How to select value of all the tbody inputs values using jQuery

Categories

Resources