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>
Related
I have been looking around everywhere for a solution and I just can't find any.
What I'm trying to do here is get the third column value i.e price when the checkbox in the first column is selected. I'll eventually use the column value to calculate the total which will be thrown into a div.
<body>
<form action="" method="post"><table id="tableid">
<tr>
<th><b>Menu:</b></th>
</tr>
<tr>
<th></th>
<th>Item</th>
<th>Price</th>
</tr>
<tr>
<td><input type="checkbox" class="chkbx" name="item" value="27"></td>
<td>Item1</td>
<td class="">100</td>
</tr>
<tr>
<td><input type="checkbox" class="chkbx" name="item" value="28"></td>
<td>Item2</td><td class="">200</td>
</tr>
<tr>
<td><input type="checkbox" class="chkbx" name="item" value="29"></td>
<td>Item3</td>
<td class="">300</td>
</tr>
<tr>
<td><input type="checkbox" class="chkbx" name="item" value="30"></td>
<td>Item4</td>
<td class="">400</td>
</tr>
</table>
</form>
<div id="container"></div>
</body>
I've tried several options from $(this).parent().find()....and nth-child() but i don't seem to be getting how "this" works
sample code:
$(document).ready(function(){
$('.chkbx').change(function(){
$('.chkbx:checked').each(function(){
total+=parseInt($(this).parent().find("td").text());
});
//var item=$(".chkbx tr:nth-child(2)").text();
$("#container").html(total);
});
});
Is my approach wrong? How should I go about this? Will using classes be of any help?
Thanks in Advance!!
P.S: Very new to JS and JQuery.
You need to target last td element so you can use .closest() to traverse up-to <TR> then use .eq(index)1 to target the desired element
total+= parseInt($(this).closest('tr').find("td:eq(2)").text(), 10);
$(document).ready(function() {
$('.chkbx').change(function() {
var total = 0;
$('.chkbx:checked').each(function() {
total += parseInt($(this).closest('tr').find("td:eq(2)").text(), 10);
});
console.clear();
console.log(total);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableid">
<tr>
<th><b>Menu:</b></th>
</tr>
<tr>
<th></th>
<th>Item</th>
<th>Price</th>
</tr>
<tr>
<td><input type="checkbox" class="chkbx" name="item" value="27"></td>
<td>Item1</td>
<td class="">100</td>
</tr>
<tr>
<td><input type="checkbox" class="chkbx" name="item" value="28"></td>
<td>Item2</td>
<td class="">200</td>
</tr>
<tr>
<td><input type="checkbox" class="chkbx" name="item" value="29"></td>
<td>Item3</td>
<td class="">300</td>
</tr>
<tr>
<td><input type="checkbox" class="chkbx" name="item" value="30"></td>
<td>Item4</td>
<td class="">400</td>
</tr>
</table>
1I would recommend, assigning a CSS class to target the element rather than using index.
HTML
<td class="price">400</td>
Script
total+= parseInt($(this).closest('tr').find("td.price").text(), 10);
You can use siblings with last like this.
$(this).parent().siblings(":last").text();
Use need to use closest() to find the tr then use find with :nth-child() to get the specific td
$(document).ready(function(){
$('.chkbx').change(function(){
var total = 0;
$('.chkbx:checked').each(function(){
total+=parseInt($(this).closest('tr').find("td:nth-child(3)").text());
});
//var item=$(".chkbx tr:nth-child(2)").text();
$("#container").text(total);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post"><table id="tableid">
<tr>
<th><b>Menu:</b></th>
</tr>
<tr>
<th></th>
<th>Item</th>
<th>Price</th>
</tr>
<tr>
<td><input type="checkbox" class="chkbx" name="item" value="27"></td>
<td>Item1</td>
<td class="">100</td>
</tr>
<tr>
<td><input type="checkbox" class="chkbx" name="item" value="28"></td>
<td>Item2</td><td class="">200</td>
</tr>
<tr>
<td><input type="checkbox" class="chkbx" name="item" value="29"></td>
<td>Item3</td>
<td class="">300</td>
</tr>
<tr>
<td><input type="checkbox" class="chkbx" name="item" value="30"></td>
<td>Item4</td>
<td class="">400</td>
</tr>
</table>
</form>
<span id='container'> </span>
You were not tracking the TD for price column correctly, and you need to declare the total variable outside the .each() otherwise the scope wont allow to access the variable and populate the total, see below for a demo
var total = 0;
$(document).ready(function() {
$('.chkbx').change(function() {
$('.chkbx:checked').each(function() {
//console.log($(this).parent().next().next().text());
total += parseInt($(this).parent().next().next().text());
});
//var item=$(".chkbx tr:nth-child(2)").text();
$("#container").html(total);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
TOTAL
<div id="container"></div>
<form action="" method="post">
<table id="tableid">
<tr>
<th><b>Menu:</b></th>
</tr>
<tr>
<th></th>
<th>Item</th>
<th>Price</th>
</tr>
<tr>
<td><input type="checkbox" class="chkbx" name="item" value="27"></td>
<td>Item1</td>
<td class="">100</td>
</tr>
<tr>
<td><input type="checkbox" class="chkbx" name="item" value="28"></td>
<td>Item2</td>
<td class="">200</td>
</tr>
<tr>
<td><input type="checkbox" class="chkbx" name="item" value="29"></td>
<td>Item3</td>
<td class="">300</td>
</tr>
<tr>
<td><input type="checkbox" class="chkbx" name="item" value="30"></td>
<td>Item4</td>
<td class="">400</td>
</tr>
</table>
</form>
I need to print the word of Emails on click of all checkboxes. How can I do that? Here is my HTML structure:
$('td input').on('change', function() {
var header_name = $(this).closests('tr').sibilings('th').last().text();
console.log(header_name);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<th><input type="checkbox" class="all_checkboxes"></th>
<th>Emails</th>
</tr>
<tr>
<td><input type="checkbox" data-id="email"></td>
<td>email</td>
</tr>
<tr>
<td><input type="checkbox" data-id="gmail"></td>
<td>gmail</td>
</tr>
<tr>
<td><input type="checkbox" data-id="aol"></td>
<td>aol</td>
</tr>
<tr>
<td><input type="checkbox" data-id="chmail"></td>
<td>chmail</td>
</tr>
</tbody>
</table>
Firstly you have a couple of typos. closests() should be closest() and sibilings() needs to be siblings().
The issue itself is because your DOM traversal is not correct. You're trying to look at sibling th of the parent tr to the clicked input, when the th you're aiming for is in a completely different row.
To fix this you should use closest() to get the table, then find() the tr:last, like this:
$('td input').on('change', function() {
var header_name = $(this).closest('table').find('th:last').text();
console.log(header_name);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<th><input type="checkbox" class="all_checkboxes"></th>
<th>Emails</th>
</tr>
<tr>
<td><input type="checkbox" data-id="email"></td>
<td>email</td>
</tr>
<tr>
<td><input type="checkbox" data-id="gmail"></td>
<td>gmail</td>
</tr>
<tr>
<td><input type="checkbox" data-id="aol"></td>
<td>aol</td>
</tr>
<tr>
<td><input type="checkbox" data-id="chmail"></td>
<td>chmail</td>
</tr>
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<th><input type="checkbox" class="all_checkboxes"></th>
<th>Emails</th>
</tr>
<tr>
<td><input type="checkbox" data-id="email"></td>
<td>email</td>
</tr>
<tr>
<td><input type="checkbox" data-id="gmail"></td>
<td>gmail</td>
</tr>
<tr>
<td><input type="checkbox" data-id="aol"></td>
<td>aol</td>
</tr>
<tr>
<td><input type="checkbox" data-id="chmail"></td>
<td>chmail</td>
</tr>
</tbody>
</table>
<script>
$('td input, th input').on('change', function(){
var header_name = $( "tr:first" ).last().text();
console.log(header_name);
})
</script>
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>
I'm trying to have "set all" radio buttons at the bottom of my popup control so when the user has a long list of conflicts to resolve, they can just select one of the radio buttons and the option will be quickly select. However, my javascript fires, and seems to find the radio button, but fails to actually set the radio button.
I have a gridview gvErrors that is being looped though and in the second cell of each gridview row is a table with the options (tblOptions). I have tried using .attr("checked", true), .setAttribute("checked", true), and .prop("checked", true). I am receiving no errors, in the console, but the radio buttons all remain unchecked. Any help with this would be appreciated. Below is the Javascript.
<script type="text/javascript" language="javascript">
function selectAll(option) {
var grid = document.getElementById("<%=gvErrors.ClientID%>");
for (var i = 0; i < grid.rows.length; i++)
{
var row = grid.rows[i];
var table = $(row).find("tblOptions");
var radio = $(table).find("input[name*=" + option + "]:radio");
//$('td input:radiobutton', '#tblOptions').prop('checked', true);
$(radio).prop("checked", "checked");
var test = "";
}
};
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
//This handles the rows or colums selection
$("#<%=rdbCancelAll.ClientID%>").click(function() {
selectAll("rdbCancel");
});
});
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
//This handles the rows or colums selection
$("#<%=rdbReplaceAll.ClientID%>").click(function() {
selectAll("rdbReplace");
});
});
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
//This handles the rows or colums selection
$("#<%=rdbRenameAll.ClientID%>").click(function() {
selectAll("rdbRename");
});
});
</script>
Small example of the gridview:
<table class="tableinfo nocollapse c6" cellspacing="1" cellpadding="2" border="0" id="ctl00_Main_gvErrors">
<tbody>
<tr class="tableinfobody tableinfoGray">
<th scope="col"><span class="c1">Current Name</span></th>
<th scope="col"><span class="c1">Options</span></th>
<th scope="col">Differences</th>
</tr>
<tr class="tableinfobody">
<td class="l"><span id="ctl00_Main_gvErrors_ctl02_lblName">Test1</span></td>
<td class="l">
<table id="ctl00_Main_gvErrors_ctl02_tblOptions" border="0">
<tbody>
<tr>
<td><input id="ctl00_Main_gvErrors_ctl02_rdbCancel" type="radio" name=
"ctl00$Main$gvErrors$ctl02$Options" value="rdbCancel" /><label for=
"ctl00_Main_gvErrors_ctl02_rdbCancel">Cancel adding signal.</label></td>
</tr>
<tr>
<td><input id="ctl00_Main_gvErrors_ctl02_rdbReplace" type="radio" name=
"ctl00$Main$gvErrors$ctl02$Options" value="rdbReplace" /><label for=
"ctl00_Main_gvErrors_ctl02_rdbReplace">Replace curent signal with
imported signal.</label></td>
</tr>
<tr>
<td><input id="ctl00_Main_gvErrors_ctl02_rdbRename" type="radio" name=
"ctl00$Main$gvErrors$ctl02$Options" value="rdbRename" /><label for=
"ctl00_Main_gvErrors_ctl02_rdbRename">Rename imported signal to:</label>
<input name="ctl00$Main$gvErrors$ctl02$txtNewName" type="text" value=
"Test1_1" id="ctl00_Main_gvErrors_ctl02_txtNewName" class="c2" /></td>
</tr>
</tbody>
</table>
</td>
<td class="l">
<input type="hidden" name="ctl00$Main$gvErrors$ctl02$hfParamInternalUnmatched"
id="ctl00_Main_gvErrors_ctl02_hfParamInternalUnmatched" value=
"EBC1-Test1" /> <input type="hidden" name=
"ctl00$Main$gvErrors$ctl02$hfParamInternalMatched" id=
"ctl00_Main_gvErrors_ctl02_hfParamInternalMatched" value="Test1" />
<table class="tableinfo c5" cellspacing="1" cellpadding="2" border="0">
<tbody>
<tr class="tableinfobody tableinfoGray">
<th>Value Name</th>
<th>Current</th>
<th>Imported</th>
</tr>
<tr class="tableinfobody">
<td class="c3">Unit</td>
<td class="c4"></td>
<td class="c4">flag</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="tableinfobody tableinfoGray">
<td class="l"><span id="ctl00_Main_gvErrors_ctl03_lblName">Test2</span></td>
<td class="l">
<table id="ctl00_Main_gvErrors_ctl03_tblOptions" border="0">
<tbody>
<tr>
<td><input id="ctl00_Main_gvErrors_ctl03_rdbCancel" type="radio" name=
"ctl00$Main$gvErrors$ctl03$Options" value="rdbCancel" /><label for=
"ctl00_Main_gvErrors_ctl03_rdbCancel">Cancel adding signal.</label></td>
</tr>
<tr>
<td><input id="ctl00_Main_gvErrors_ctl03_rdbReplace" type="radio" name=
"ctl00$Main$gvErrors$ctl03$Options" value="rdbReplace" /><label for=
"ctl00_Main_gvErrors_ctl03_rdbReplace">Replace curent signal with
imported signal.</label></td>
</tr>
<tr>
<td><input id="ctl00_Main_gvErrors_ctl03_rdbRename" type="radio" name=
"ctl00$Main$gvErrors$ctl03$Options" value="rdbRename" /><label for=
"ctl00_Main_gvErrors_ctl03_rdbRename">Rename imported signal to:</label>
<input name="ctl00$Main$gvErrors$ctl03$txtNewName" type="text" value=
"Test2_1" id="ctl00_Main_gvErrors_ctl03_txtNewName" class="c2" /></td>
</tr>
</tbody>
</table>
</td>
<td class="l">
<input type="hidden" name="ctl00$Main$gvErrors$ctl03$hfParamInternalUnmatched"
id="ctl00_Main_gvErrors_ctl03_hfParamInternalUnmatched" value=
"HCMData3-Testw" /> <input type="hidden" name=
"ctl00$Main$gvErrors$ctl03$hfParamInternalMatched" id=
"ctl00_Main_gvErrors_ctl03_hfParamInternalMatched" value=
"PrimaryData3-Testw" />
<table class="tableinfo c5" cellspacing="1" cellpadding="2" border="0">
<tbody>
<tr class="tableinfobody tableinfoGray">
<th>Value Name</th>
<th>Current</th>
<th>Imported</th>
</tr>
<tr class="tableinfobody">
<td class="c3">SA</td>
<td class="c4">3, 239</td>
<td class="c4">239</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="tableinfobody tableinfoBlue">
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
Any help clearing this up would be greatly appreciated.
Use the value as a selector like so
function selectAll(option) {
var radio = $("input[value=" + option + "]");
$(radio).prop("checked", "checked");
}
$('input[type="button"]').on('click', function(){
var value = $(this).data('attr');
selectAll(value);
});
http://jsfiddle.net/3u3z4bLn/3/
The following code it is auto-explained:
HTML:
<table cellspacing="1" class="CRMP_WP_QUICKADS_PLUGIN">
<tr id="CRMP_WP_QUICKADS_tr_in_content">
<td>
<table>
<tr>
<td>
<input type="radio" name="in_content" value="1">
</td>
<td>
Enabled
</td>
</tr>
<tr>
<td>
<input type="radio" name="in_content" value="0">
</td>
<td>
Disabled
</td>
</tr>
</table>
</td>
</tr>
<tr>
<th colspan="2">
Hover Ads
</th>
</tr>
<tr>
<td>
...
</td>
</tr>
...
</table>
javascript:
$("input[name='in_content']").click(function(){
if ($(this).val()){
$("#CRMP_WP_QUICKADS_tr_in_content").nextAll().slice(0,6).show();
} else{
$("#CRMP_WP_QUICKADS_tr_in_content").nextAll().slice(0,6).hide();
}
});
The hide/show effect is not running.-
Does this work?
$("#CRMP_WP_QUICKADS_tr_in_content").nextAll()
.slice(0,6)
.each(function(index, element) {
element.hide();
});
// is not enough:
if ($(this).val())
// it must be:
if ($(this).val() == 1)