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.
Related
I am using CheckBoxFor to create a form of a bunch of checkboxes. I have added a class to these checkboxes but since CheckBoxFor doesn't add the class to the hidden false checkbox, I can't select groups of these generated checkboxes based upon it.
Here's a sample of the checkbox table that gets generated. When I hit the "Select All" checkbox (the top most one), I want all the checkboxes in that column to be selected. I do not want the whole table selected, just the column.
Some of the relevant HTML:
<td><input type="checkbox" name="selectAll" value="NBTC" /></td>
<td><input type="checkbox" name="selectAll" value="Contractors" /></td>
<td><input type="checkbox" name="selectAll" value="Coordinators" /></td>
<td><input type="checkbox" name="selectAll" value="NGO" /></td>
<td><input type="checkbox" name="selectAll" value="Public" /></td>
Example of the CheckBoxFor statements I'm using:
#Html.CheckBoxFor(m => m.NBTCGroup.NBTC_FA_Centroid, new {#class = "NBTC"}
This is the JS I was working with, but since the it's selecting based off the class, it doesn't work to select and unselect all as the false checkbox doesn't have the class added to it.
$(document).ready(function () {
$('input[name="selectAll"]').click(function () {
var source = $(this);
var sourceName = $(this).val();
if (sourceName == 'NBTC') {
var checkboxes = document.querySelectorAll('input[class="NBTC"]');
}
else if (sourceName == 'Contractors') {
var checkboxes = document.querySelectorAll('input[class="Contractors"]');
}
else if (sourceName == 'Coordinators') {
var checkboxes = document.querySelectorAll('input[class="Coordinators"]');
}
else if (sourceName == 'NGO') {
var checkboxes = document.querySelectorAll('input[class="NGO"]');
}
else if (sourceName == 'Public') {
var checkboxes = document.querySelectorAll('input[class="Public"]');
}
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i] != source)
checkboxes[i].checked = source.checked;
}
});
Anybody have any ideas on another way to do this?
From your code I assume you are adding NBTC, Contractors, etc classes to each group of checkboxes... you also have several selectAll checkboxes, for each group.
You can change your jQuery like this:
$('input[name="selectAll"]').click(function() {
var className = $(this).val(); // <-- get the group: NBTC, Contractors, etc
$('.' + className).prop('checked', this.checked);
// generates something like this: $('.NBTC').prop('checked', this.checked);
});
I have used this answer for check/uncheck logic.
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);
});
});
<tr>
<td class="value" style="width:40%;">
<label class="label">Gender value</label>
</td>
<td class="value" style="width:40%;">
<input id="checkbox" type="checkbox" tabindex="0" name="chkCustom">
<label>M</label>
<input id="checkbox" type="checkbox" tabindex="0" name="chkCustom">
<label>F</label>
<input id="checkbox" type="checkbox" tabindex="0" name="chkCustom">
<label>U</label>
</td>
</tr>
I have the above HTML, I am reading all the controls from my webpage dynamically. In above I want to read the label value to its specified type and read the next value on the basis of its type:
Please look on my code:
// Read labels text
$("#tblCustomFields tr .label").each(function () {
var value = this.innerHTML;
console.log(this);
var type = $(this).closest('td').next().find('input').val();
alert(value);
alert(type);
//If next element type is *checkbox* then read checkbox values
if(type == "checkbox")
{
// Read checkbox values
$('tblCustomFields tr input:checked').each(function (s) {
var inputCheckBox = new Array();
inputCheckBox.push([this.id, 0]);
});
for (var i = 0; i < inputCheckBox.length; i++) {
alert(inputCheckBox[i]);
}
}
});
The above code will give me all the checkboxes on the webpage but I want the checkboxes only defined in the above HTML, and I also want to read the values of only those checkboxes which are checked. Please help.
GOAL: I am binding the dynamic HTML to the page its type might be checkbox or dropdown or text. Now I want to read the page labels and the values related to that labels. For ex my label(Gender value) has values of type checkbox so I just want to read the checked checkbox values related to that label.
UPDATE: At least tell me that how can I get the next element type
I am using the below code:
var type = $(this).closest('td').next().find('type').val();
ANY HELP
I think that all the markup has to be reviewed, but anyway, I think I know (please notice me if don't) what you want.
Try this:
// Read labels text
$("#tblCustomFields tr .label").each(function () {
var value = this.innerHTML;
console.log(this);
alert(value);
var inputCheckBox = new Array();
$(this).first().closest("td").next().find("input[type='checkbox']:checked").each(function(){
inputCheckBox.push($(this).next("label").text());
});
for (var i = 0; i < inputCheckBox.length; i++) {
alert(inputCheckBox[i]);
}
});
I'll make you a jsFiddle to test it.
Your question is confusing.
$("#tblCustomFields tr .label") - This will look for a child of TR with class label. Your HTML, shows that this resides inside td. If all the label elements have class label, you can refer each by -
$(".label).each(function(){
//do whatever you want
});
To get the element type next to the label with class label -
$(".label).each(function(){
var NextTd = $(this).parent().next(); // refers to the next td
$(NextTd).each(function(){
var type = $(this).find('input').prop('tagName');
//do whatever you want
});
});
On a button click JavaScript Validation should be: If a user select one checkbox it should allow to process further to any script, but when user selects more than one checkbox it should prompt that "you can select only one check box"
I am not getting to What javaScript I should write ?
<tr><td colspan='2'><input type='checkbox' name='check1' value=12> Q.12 Torronto in located in ?</td></tr>
<tr><td colspan='2'><input type='checkbox' name='check1' value=4> Q.4 Columbo is the capital of which country ?</td></tr>
<tr><td colspan='2'><input type='checkbox' name='check1' value=16> Q.16 Most used social suite ?</td></tr>
<tr><td colspan='2'><input type='checkbox' name='check1' value=19> Q.19 Largest State ?</td></tr>
Function call
<td><input type='submit' type='Edit' value='EDIT' formmethod='post' formaction='/~xyz/cgi-bin/Project/CheckEdit.py' onclick='return(CheckedOne())'></td></tr>
The JS which I tried:
function Checked() {
var d = document.myForm.check1;
var arr = 0;
for (var i = 0; i < d.length; i++) {
if (d[i].checked) {
arr++;
alert(arr);
}
}
if (arr == 1) return true;
else {
alert("Please select only one Checkbox");
return false;
}
}
I think you can do better using the approach by sravis using jQuery.
Here are the issues in your original code:
You call the function CheckedOne in the HTML but have a different name in the JS (Checked).
Also, use document.getElementsByName('check1'); to get the
array.
See http://jsbin.com/iTiQOFIX/1/
jQuery length will get you total checked boxes
http://jsfiddle.net/yAz2j/
$(".subtn").live('click', function() {
var total = $('.check1:checked').length;
if(total > 1) {
alert(" Checked : "+total);
// your code
} else {
alert("Checked only one!");
}
return false;
});
Also check this post: https://stackoverflow.com/a/5594976/1570901
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.