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>
Related
I want to show and hide several tables on one page with one button. Unfortunately my script can only show and hide one table at a time.
I have a page with a lot of queries. There are also text fields in a table. For a better overview, the tables with the text fields should only be displayed when the checkbox is ticked. The checkbox should not be clicked at the beginning.
function Displayer(n)
{
var check = document.getElementById('Section'+n);
if (check.style.display == 'none')
{
check.style.display='inline';
}
else
{
check.style.display='none';
}
}
<p><input type="checkbox" class="btnstylega" onClick="Displayer(99)" />Show Tables</p>
<table id="Section99" style="display:none;"> <td>
AAAAAAAAAAAAAA
</td></table>
<table id="Section99" style="display:none;"> <td>
BBBBBBBBBBBBBBB
</td></table><br>
I want to show and hide many tables without adjusting the tables by clicking on the checkbox.
An ID must be unique in a document. The tool to mark multiple elements as part of a group is a class.
Replace your id attributes with class attributes.
Then replace getElementById with getElementsByClassName (or querySelectorAll).
These methods return lists of nodes and not single elements, so loop over the result like an array and access the style property on each one in turn.
The attribute id must be unique in a document, you can use class instead. You can use querySelectorAll() to target all the elements having the class, then loop through them to set the style. You can toggle the class using classList.toggle() like the following way:
function Displayer()
{
var check = document.querySelectorAll('.Section99');
check.forEach(function(table){
table.classList.toggle('show');
});
}
.Section99{
display: none;
}
.show{
display: block;
}
<p><input type="checkbox" class="btnstylega" onClick="Displayer()" />Show Tables</p>
<table class="Section99" class="hide"> <td>
AAAAAAAAAAAAAA
</td></table>
<table class="Section99" class="hide"> <td>
BBBBBBBBBBBBBBB
</td></table><br>
Improvement: It will add the event handler and trigger the change on load where needed
Note the data-attribute on the checkbox
var chg = new Event('change');
document.querySelectorAll(".btnstylega").forEach(function(but) {
but.addEventListener("change", function() {
var checked = this.checked,
section = this.getAttribute("data-tables");
document.querySelectorAll('.Section' + section).forEach(function(sect) {
sect.classList.toggle("hide",!checked);
});
})
but.dispatchEvent(chg);
});
.hide {
display: none;
}
<p><input type="checkbox" class="btnstylega" data-tables="88" checked />Show Tables 88 </p>
<p><input type="checkbox" class="btnstylega" data-tables="99" />Show Tables 99</p>
<table class="Section88">
<tr>
<td>
AAAAAAAAAAAAAA
</td>
</tr>
</table>
<table class="Section88">
<tr>
<td>
BBBBBBBBBBBBBBB
</td>
</tr>
</table><hr>
<table class="Section99">
<tr>
<td>
CCCCCCCCCCCCCCCC
</td>
</tr>
</table>
<table class="Section99">
<tr>
<td>
DDDDDDDDDDDDDDDDDDDD
</td>
</tr>
</table>
Hello all,
I need to create textbox dynamically(depending on condition), when user clicks on employee it should get added next to employee, if user clicks on another element, it should get added next to another element
I have tried following, but I am not able to get exact td and function by which i can append textbox to it.
$("#emlpyeetd").after('<s:textfield id="employeeVal" name="employeeView.policyOrQuoteNumber" maxlength="15" style="width: 200px;" class="hideForAnotherField" theme="simple"></s:textfield>');
<td width="25%">
employee
</td>
<td id="policytd" class= "anotherfield" width="25%"></td>
Try something like this, it will remove 1st textbox when you click on 2nd option.
Jquery code
<script>
$(document).ready(function(){
$(".radio_action").click(function(){
if($(this).val() == "E" ){
$("#other_text").html("");
$("#emp_text").html("<input type='text' >");
}
else if($(this).val() == "A" ) {
$("#emp_text").html("");
$("#other_text").html("<input type='text' >");
}
})
});
</script>
HTML code
<table>
<tr>
<td><input type="radio" name="radio_type" value="E" class="radio_action" /> Employee</td>
<td id="emp_text"></td>
</tr>
<tr>
<td><input type="radio" name="radio_type" value="A" class="radio_action" /> Another Element</td>
<td id="other_text"></td>
</tr>
</table>
Html
<div>
<div class="container">
<div><input type="radio"/ name="somename" value="1">Val1</div>
<div class="editor-wrapper"></div>
</div>
<div class="container">
<div><input type="radio"/ name="somename" value="1">Val2</div>
<div class="editor-wrapper"></div>
</div>
</div>
JS
$(document).ready(function() {
$('input[name="somename"]').click(function() {
$(this.closest('.container')).find('.editor-wrapper').html($('<input>'))
});
});
jsfiddle
I am having trouble getting the text box nearest to my selected radio button. Here is what I have tried so far which keeps returning me 'undefined'.
HTML:
<fieldset class="capacity-field">
<legend>Capacity</legend>
<table style="margin-bottom: 20px">
<tr>
<td>
<input type="radio" name="capacity" value="raw" checked>Raw (TB):
</td>
<td>
<input type="text" name="raw-capacity" value="256" size="2"> TB
</td>
</tr>
<tr>
<td>
<input type="radio" name="capacity" value="usable">Usable (TB):
</td>
<td>
<input type="text" name="usable-capacity" value="161.28" size="2"> TB
</td>
</tr>
<tr>
<td>
<input type="radio" name="capacity" value="effective">Effective (TB):
</td>
<td>
<input type="text" name="effective-capacity" value="161.28" size="2"> TB
</td>
</tr>
</table>
JavaScript/jQuery
function cap_growth_update(toUpdate) {
var capacity = $("input[name='capacity']:checked").next("input[type='text']").val();
alert(capacity);
}
$(document).ready(function(){
cap_growth_update("T");
});
I know the value of toUpdate is arbitrary at this point, but it will be used as a selector later down the line and thus is included.
The jQuery next() function looks for a sibling element, but since these elements are separated under different td elements, you'll have to climb up the DOM:
$("input[name='capacity']:checked").closest("tr").find("input[type='text']").val();
So what it does, is to go to the closest parent, and then search for the children text input.
Try using parents() with eq() and find()
$("input[name='capacity']:checked").parents().eq(1).find("input[type='text']").val();
Note this is only a suggestion I make based on your markup, your goal could be achieved in other ways (jQuery is a rich library to traverse and manipulate DOM)
$(function() {
$("input:radio").click(function() {
if ($(this).is(":checked")) {
var value = $(this).closest("tr").find("input:text").val();
}
});
});
The code checks for a click event on a radio element then check if the element is checked, if it's checked then obtain the parent row of the radio element, find an input text inside the row an get the value of the input text the it saves the value at the var value, so you can do whatever with the value :)
Regards!
Using jquery, i would like to find a value in an input field just above the current table row, for example if tr id="two" is active, i can find the value of input id="x" at tr id="one" and if tr id="three" is active, i can find the value of input id="y" at tr id="two", Suggestions!
<table>
<tr id="one">
<input type="text" id="x"/>
</tr>
<tr id="two">
<input type="text" id="y"/>
</tr>
<tr id="three">
<input type="text" id="z"/>
</tr>
</table>
You can use prev(), find() and val():
$('tr.active').prev().find('input').val()
//first part can depend upon how/when you want to find it.
$('tr.active').prev().find('input[type="text"]').val()
If you want to avoid jQuery..
var x = document.querySelector("tr.active");
var value = x.parentNode.firstChild.value;
$('tr.active').prev().children()[0].val()
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.