I have a table: in first row I have an anchor to click, in second - <asp:CheckboxList /> expanding to another table.
How can I access inputs inside that table using jQuery? I want to select all using one link, and deselect all using another one.
<table>
<tr>
<td>
<table>
<tbody>
<tr>
<td>
<!-- Anchor to click -->
<a onclick="do stuff" href="javascript://">Select all</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<!-- CheckboxList -->
<table id="ctl00_commonForm_ctl00_ctl00_listCheck" class="list" border="0">
<tbody>
<tr>
<td>
<!-- input to select -->
<input id="ctl00_commonForm_ctl00_ctl00_listCheck_0" name="ctl00$commonForm$ctl00$ctl00$listCheck$0" checked="checked" type="checkbox"><label for="ctl00_commonForm_ctl00_ctl00_listCheck_0">Date</label>
</td>
</tr>
<tr>
<td>
<input id="ctl00_commonForm_ctl00_ctl00_listCheck_1" name="ctl00$commonForm$ctl00$ctl00$listCheck$1" checked="checked" type="checkbox"><label for="ctl00_commonForm_ctl00_ctl00_listCheck_1">Amount</label>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
I tried $(this).parent().('#list > input') but it doesn't work. I'm not familiar with jQuery, so please help. Thanks!
This is the jQuery I think you need:
// When the select link is clicked
$('#selectall').click( function ( ) {
\\ For each checkbox inside an element with class "link" set to checked
$('.list input[type=checkbox]').attr('checked','checked');
});
You need to change your link to this:
<a id="selectall" href="javascript:void( );">Select all</a>
Similarly, for deselect, jQuery:
$('#deselectall').click( function ( ) {
$('.list input[type=checkbox]').removeAttr('checked');
});
Link:
<a id="deselectall" href="javascript:void( );">Select all</a>
Because it would hurt me not to, I've got to warn against using tables for laying out your form. It's very bad practice these days, and you can make a layout that looks as good, but is more flexible, using divs and CSS. I'd go for:
<div id="select_links">
<!-- Anchor to click -->
<a id="selectall" href="javascript:void( );">Select all</a>
<a id="deselectall" href="javascript:void( );">Deselect all</a>
</div>
<div class="list">
<div class="listItem">
<input id="ctl00_commonForm_ctl00_ctl00_listCheck_0"
name="ctl00$commonForm$ctl00$ctl00$listCheck$0" checked="checked"
type="checkbox">
<label for="ctl00_commonForm_ctl00_ctl00_listCheck_0">Date</label>
</div>
<div class="listItem">
<input id="ctl00_commonForm_ctl00_ctl00_listCheck_1"
name="ctl00$commonForm$ctl00$ctl00$listCheck$1" checked="checked"
type="checkbox">
<label for="ctl00_commonForm_ctl00_ctl00_listCheck_1">Amount</label>
</div>
</div>
EDIT: Mark's right, that should have been removeAttr(checked), not attr('checked',null);
It is as simple as just targeting all checkboxes and setting the checkbox.
$("#doIt").click(function(){
$("input[type='checkbox']").attr("checked", true);
});
If you want to remove the check
$("#doIt").click(function(){
$("input[type='checkbox']").removeAttr("checked");
});
Another option would be to use toggle() which can be used to toggle checkboxes on an off.
$("#doIt").toggle(function() {
$(this).text("Select All");
$("input[type='checkbox']").removeAttr("checked");
}, function() {
$(this).text("Deselect All");
$("input[type='checkbox']").attr("checked", true);
});
Code example on jsfiddle.
I would remove any dhtml code from your anchor tag, get rid of the onclick and change the href to just #. With jquery all you need is a class or id.
so you should have:
in your html:
<a id="select_on" class="toggle_checks" href="#">Select all</a>
<a class="toggle_checks" href="#">Select none</a>
in your javascript:
$('a.toggle_checks').click(function(){
$('table.list').children('input').attr('checked', this.id == 'select_on');
});
so what this code is doing is $('a.toggle_checks') is selecting all anchor tags with class toggle_checks, binding a click event handler, when clicked $('table.list') selects the tables with class list, .children('input') selects the inputs within those tables, and the attr part sets the checked attribute to checked if the anchor tag has the id select_on and not if otherwise.
Related
Is there a way to check checkboxes based on text that follows them? An App at work that requires me to check ALOT of boxes depending on the text that follows. Seems like it could be done programmatically, but it's definitely beyond my limited knowledge
Here's an obscured snippet of the page.
<tr>
<td><span title="original"><input id="a0" type="checkbox" name="orginal_a0" value="0"><label for="a0">
<div class="List">
<div>
<div>Default Thing</div>
</div>
</div>
</label></span></td>
</tr>
<tr>
<td><span title="original"><input id="a1" type="checkbox" name="original_a1" value="1"><label for="a1">
<div class="List">
<div>
<div>New Thing</div>
</div>
</div>
</label></span></td>
</tr
I know I could based on the input id or name, but unfortunately they don't help identify if I should or should not check the box. It's the text that follows the box that's important. If iIcould make it so it would check any box that begin with "New" or any other text, but also not check the ones that begin with "Default". So in the example above I'd check the 2nd box and not check the 1st one. In the app it's generally checking 50-75 boxes but leaving a similar amount unchecked. Ideally it would be something I could just type into the console or make into a bookmarklet.
Is this possible?
You could loop over all the cells, check if the text doesn't begin with default and set the checked state to the input
As a side note it's better to not nest a div element inside an inline element like a span or a label
const td = document.querySelectorAll('td');
[...td].forEach((cell) => {
const text = cell.textContent.trim();
if (!text.match(/^default/i)) {
cell.querySelector('input').checked = true;
}
});
<table>
<tr>
<td>
<span title="original">
<input id="a0" type="checkbox"
name="orginal_a0" value="0">
<label for="a0">Default Thing</label>
</span>
</td>
</tr>
<tr>
<td>
<span title="original">
<input id="a1" type="checkbox"
name="original_a1" value="1">
<label for="a1">New Thing</label>
</span>
</td>
</tr>
</table>
This example loops through all the checkboxes and grabs the next element, which is assumed to be the label. If the div indicated doesn't begin with "Default" it will check the box.
const allCheckboxes = document.querySelectorAll("input[type='checkbox']");
for (let checkbox of allCheckboxes) {
// get the label element and locate the appropriate div within
let appropriateDiv = checkbox.nextElementSibling.querySelector("div.List div div");
if (appropriateDiv && !appropriateDiv.innerText.startsWith("Default")) {
checkbox.checked = true;
}
}
<table><tbody>
<tr>
<td><span title="original"><input id="a0" type="checkbox" name="orginal_a0" value="0"><label for="a0">
<div class="List">
<div>
<div>Default Thing</div>
</div>
</div>
</label></span></td>
</tr>
<tr>
<td><span title="original"><input id="a1" type="checkbox" name="original_a1" value="1"><label for="a1">
<div class="List">
<div>
<div>New Thing</div>
</div>
</div>
</label></span></td>
</tr>
</tbody></table>
I have the following markup inside my web application , where there is an input element, now i want to change the text of the below span from "-" to something else.
Now here is the markup :-
<span dir="none">
<table id="OrderQuickOrder_a91a0ce2-7fb6-4c9c-97f5-e851cf4f10a6_MultiChoiceTable" cellspacing="1" cellpadding="0">
<tbody>
<tr>
<td>
<span class="ms-RadioText" title="Yes">
<input id="OrderQuickOrder_****_MultiChoiceOption_0" type="checkbox">
<label for="OrderQuickOrder_**_MultiChoiceOption_0">Yes</label>
</span>
</td>
</tr>
</tbody>
</table>
</span>
<span class="ms-metadata">-</span>
and this is my jQuery selector:-
$('input[id^="OrderQuickOrder_"]').parent('span').parent('span').nextAll('span').after('<a id="dialogtrigger" href="/*****" target="_blank">Items Order</a>' );
but the above code did not change anything. i think the .parent('span').parent('span') is not able to select the parent span of the direct parent span of the input element...
use parents() to get to your selection:
https://jsfiddle.net/fLb89q4p/
$('input[id^="OrderQuickOrder_"]').parents()
.nextAll('span')
.after('<a id="dialogtrigger" href="/*****" target="_blank">Items Eligable for Quick Order</a>' );
If you want to remove the text and insert new text use:
$('input[id^="OrderQuickOrder_"]').parents()
.nextAll('span')
.text('')
.after('<a id="dialogtrigger" href="/*****" target="_blank">Items Eligable for Quick Order</a>' );
I'm having trouble selecting all the last inputs on a set of divs with tables inside them. Here's a jsFiddle of my issue.
A simplified version of my HTML structure:
<div class=".container">
<table>
<tbody>
<tr>
<td> <input /> </td>
<td> <input /> </td> <!-- last input in container -->
</tr>
</tbody>
</table>
</div>
<!-- More like this -->
<div class=".container"> ...
So if I had 5 .container the resulting selection would have 5 input's
I tried the following selector:
$('.container input:last-child')
You can select the last td and get its child input like:
var $inputs = $('.container td:last-child>input');
Demo: https://jsfiddle.net/bonh4r0g/
I have a tbody inside which there are href/input type text/ etc
I have a code to get all elements of tbody but how to disable it.
My tbody
<tbody id="FamilyHistory_3">
<tr>
<td class="tablecell">
<a id="FamilyHistory_3" name="316098" value="316098" onclick="javascript:save('FamilyHistory_3','test');" href="#">
<img style="border-style: none" src="../images/v10/arrow_doc.png">
</a> test
</td>
</tr>
<tr>
<td>
<table>
<tbody>
<tr>
<td></td>
<td class="tablecell">
<input type="checkbox" value="Yes" name="10627_316098">Yes
<input type="checkbox" checked="" value="No" name="10627_316098">No
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td height="2px"></td>
</tr>
</tbody>
Below is my code to get the content of tbody
function save(inputID,category){
var content= document.querySelectorAll('#tbodyID');
for(var i=0; i<content.length; i++){
// how to disable all the elements inside it
}
}
JSFiddle
document.querySelector('#tbodyID input').disabled = true;
You don't need jQuery for this.
For more than one:
JSFiddle
var l = document.querySelectorAll('#tbodyID input');
for (i = 0;i<l.length;i++)
{
l[i].disabled = true;
}
There's no need to loop, jquery can deal with groups of elements just using selectors.
Use the Jquery selectors and the prop function to add disabled="disabled" to each one.
You can also select multiple items using a comma separated list
$('#tbodyID input, #tbodyID select, ....').prop('disabled', true);
disabling an a tag will not prevent it from being clicked though. May be better to hide() these.
$('#tbodyID a').hide();
You might need to specify the types of all elements you want to disable. If you have jQuery, you can do that with something like this:
$('#tbodyID').find('a, input').prop('disabled', true);
Explanation
$('#tbodyID') : Select the element with id tbodyID
find('a, input') : Find all the a and input elements inside it
prop('disabled', true) : Set the disabled property of each element returned by the previous command
Based on your answer finally I accomplished my task using below code. I know you people have already answer but then also I am posting my answer with few addition.
Disable input
$('[id='+inputID+']').find('input').attr('disabled', true);
id of tbody
Disable click but clickable hand will be there but no request will be submitted to server
$('[id='+inputID+']').attr('onclick','').unbind('click');
id of anchor tag
Thanks,Pise
I cant seem to find the right jquery selector for this tag:
HTML:
<div class="span4 span4-mod">
<div class="well well-mod">
<h4 class="DomainDescription">Iniz LAX1</h4>
<span class="btn-block">
<button></button>
</span>
<form action="pinfo.php" method="post">
<input type="hidden" value="">
<button>History</button>
</form>
Port Status<br />
<span class="portstatus porton">21</span>
<table class="table" style="margin-top: 10px;">
<tbody>
<tr>
<td><strong>Distro:</strong></td>
<td class="showdistro">Debian 7.1</td>
</tr>
<tr>
<td><strong>Online since: </strong></td>
<td class="showonline">2 Days 10:29</td>
</tr>
</tbody>
</table>
</div>
I'm trying to search for the class "DomainDescription", and then search for the HTML within the class "showonline", and manipulate the latter.
I'm looking for the relationship of sibling (table) >child (tbody) > child (tr) > child (td)
Try as I may, I cant seem to find a proper selector for this kind of relationship.
I began by:
$('.DomainDescription').each(function () {
var PrintedUptime=$(this).siblings().children(".showonline").html();
alert (PrintedUptime);
});
What should the proper selector be?
you can
$('.DomainDescription').each(function () {
var PrintedUptime=$(this).closest('.well-mod').find(".showonline").html();
alert (PrintedUptime);
});
Demo: Fiddle
The correct css selector is:
.DomainDescriptor~table>tbody>tr>td>.showonline
I think that is correct, at least. Therefore, you can use:
$('.DomainDescriptor~table>tbody>tr>td>.showonline').each(function(){
alert(this.html());
})
to achieve the desired effect. This is not tested.