We Keep Coding

VBA Cycle through check boxes in JavaScript Generated Table

I'm trying to check all of of the boxes in a JS generated table named tblItems
I have tried to getElementsByTagName("td") but it just loads everything as an HTML obj and I can't use InStr to find anything that differentiates them.
This is what I was trying to use to find a value I could use to pick out the check boxes.
Set AllChkBoxes = appIE.document.getElementById("tblItems").getElementsByTagName("td")
For Each box In AllChkBoxes
If InStr(UCase(box), "") <> 0 Then
MsgBox (box)
Else
MsgBox (box)
End If
Next box
End Sub
This is what the check boxes look like I was trying to cycle through the value but was unable to. there are a bunch of other td tag names but they are just values in the table or hrefs
<td align="center"><input type="checkbox" name="chkToPay" checked="" value="0"></td>
<td align="center"><input type="checkbox" name="chkToPay" checked="" value="1"></td>
<td align="center"><input type="checkbox" name="chkToPay" checked="" value="2"></td>
<td align="center"><input type="checkbox" name="chkToPay" checked="" value="3"></td>
Thanks to anyone that can help.

Would help to see more html. Looks like perhaps you can use an attribute = value selector for example. In the following I target the name attribute and associated value
Dim list As Object, i As Long
Set list = ie.document.querySelectorAll("[name=chkToPay]")
For i = 0 To list.Length - 1
Debug.Print list.item(i).Value
Next
You can also combine with a parent id if exists
Dim list As Object, i As Long
Set list = ie.document.querySelectorAll("#tableId [name=chkToPay]")
For i = 0 To list.Length - 1
Debug.Print list.item(i).Value
Next
You can also combine with another attribute to enhance specificity.
Dim list As Object, i As Long
Set list = ie.document.querySelectorAll("#tableId [type=checkbox][name=chkToPay]")
For i = 0 To list.Length - 1
Debug.Print list.item(i).Value
Next
You get the idea.
If you want to check a specific one add in the value attribute
ie.document.querySelector("#tableId [name=chkToPay][value='1']").Click

Might be below code help I am using jquery :
<table id="tableId">
<tr>
<td align="center"><input type="checkbox" name="chkToPay" value="0"></td>
<td align="center"><input type="checkbox" name="chkToPay" value="1"></td>
<td align="center"><input type="checkbox" name="chkToPay" value="2"></td>
<td align="center"><input type="checkbox" name="chkToPay" value="3"></td>
</tr>
$(document).on("click", '#tableId tbody :checkbox[name="chkToPay"]', function(event) {
var currentRows = $('#tableId');
$.each(currentRows, function() {
$(this).find(':checkbox[name=chkToPay]').each(function() {
if($(this). prop("checked") == true){
var parentTr = $(this).parents("tr");
$(this).prop('checked', true);
alert($(this).val());
// if you need text from another td you can access by below line
//alert(parentTr.children("td").eq(0).text());
}
});
});
});

JQuery each(): index is always 0 [duplicate]

This question already has answers here:
Why doesn't index() working as expected
(5 answers)
Closed 7 years ago.
I've got a jquery .each() nested in a Datatables action function. I'm trying to get the values(td) of the checked row, so I figured I use the index that's passed to the each() function and use the index to select the row(tr). The index is always 0. My approach seems flawed, but it's a start. I need the values in the checked rows.
var data = hesTable.$('input[type="checkbox"]:checked').each(function (index, element) {
var item = $(this);
alert(index);
alert('Row index: ' + item.index())
alert('Row index: ' + item.parent().index());
});
HTML (MVC)
<tbody>
#if (Model.HesViewModels != null)
{
// Can't use the DisplayTemplate here because need to assign Data-* attributes
//
//foreach (var item in Model.HesViewModels)
for (var i = 0; i < Model.HesViewModels.Count; i++)
{
// Make sure Hes Service returns data
//
if (Model.HesViewModels[i] != null)
{
<tr>
<td>
#Html.CheckBoxFor(s => Model.HesViewModels[i].Process,
new
{
data_detailid = Model.HesViewModels[i].PartnerReferralDetailId,
data_reasoncode = Model.HesViewModels[i].ReferralDetailReasonCode,
data_statuscode = Model.HesViewModels[i].ReferralDetailStatusCode,
data_outcomecode = Model.HesViewModels[i].ReferralDetailOutcomeCode
})
</td>
<td>#Model.HesViewModels[i].PartnerReferralDetailId</td>
<td>#Html.TextBoxFor(m => Model.HesViewModels[i].ReferralDetailStatusCode)</td>
<td>#Html.TextBoxFor(m => Model.HesViewModels[i].ReferralDetailReasonCode)</td>
<td>#Html.TextBoxFor(m => Model.HesViewModels[i].ReferralDetailOutcomeCode)</td>
</tr>
}
}
}
</tbody>
RENDERED HTML
<input data-detailid="1578441" data-outcomecode="154" data-reasoncode="9" data-statuscode="8" data-val="true" data-val-required="The Process field is required." id="HesViewModels_0__Process" name="HesViewModels[0].Process" type="checkbox" value="true" /><input name="HesViewModels[0].Process" type="hidden" value="false" />

Try using selector "table tr:has(:checked)" to select only tr which have input element where checked is true . Approach iterates tr elements instead of input elements , to avoid need to select parent elements within .each()
$("table tr:has(:checked)").each(function(index, element) {
console.log($(this).index())
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<table>
<tbody>
<tr>
<td>
<input type="checkbox" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" checked />
</td>
</tr>
<tr>
<td>
<input type="checkbox" checked />
</td>
</tr>
</tbody>

Because the index() is based on the siblings. Not all the checkboxes on the page. So use the index of the row.
item.closest("tr").index()
If you want to get the tds, than you really do not need the index()
item.closest("tr").find("td")

How to get the label value from table row when row number is known, using Javascript

I have a table like this-
<table>
<tr>
<td>
<label id="lbl1" value="1">Label1</label>
<td>
<td>
Some data
</td>
<td>
Some data
</td>
</tr>
<tr>
<td>
<label id="lbl2" value="1">Label1</label>
<td>
<td>
Some data
</td>
<td>
Some data
</td>
</tr>
<tr>
<td>
<label id="lbl3" value="1">Label1</label>
<td>
<td>
Some data
</td>
<td>
Some data
</td>
</tr>
</table>
My problem is that I want to alert the value of label present in the second row's first column. Assume that I don't know label id means I know its pattern like lbl1,lbl2 or lbl3.. but not exactly what it is in the second row.

If you are okay to use jQuery use this fiddle
var label = $('table tr:eq(1) td:eq(0)').find("label").attr("value")
alert(label);

You can use something like next
var labels = document.getElementsByTagName("label");
for (var i=0; i<labels.length; i++)
if (labels[i].id && labels[i].id.indexOf("lbl") == 0){
//you have found the label in the first row
}

You Can get label value by class name
$("label[class=lblclass]").each(function() {var result= $(this).val(); });
(OR)
You can get the Particular Label Value by ID
function getlabel_value(){var result=$('#lbl1').val();}

How to return false and show alert IF another checkbox hasn't been selected

I'm completely new to JavaScript and I'm completely stumped as to how to start this (better explanation beneath the code).
<form>
<div id="NECESSARY">
<table id="Table1">
<tr>
<td class="name">necessary-a</td>
<td class="button">
<input type="radio" name="necessary" value="uniquename1" /></td>
</tr>
<tr>
<td class="name">necessary-b</td>
<td class="button">
<input type="radio" name="necessary" value="uniquename2" /></td>
</tr>
</table>
</div>
<div id="group2">
<table id="Table2">
<tr>
<td class="name">group2-a</td>
<td class="button">
<input type="checkbox" name="group2" value="uniquename3" /></td>
</tr>
<tr>
<td class="name">group2-b</td>
<td class="button">
<input type="checkbox" name="group2" value="uniquename4" /></td>
</tr>
</table>
</div>
<div id="group3">
<table id="Table3">
<tr>
<td class="name">group3-a</td>
<td class="button">
<input type="radio" name="group3" value="uniquename5" /></td>
</tr>
<tr>
<td class="name">group3-b</td>
<td class="button">
<input type="radio" name="group3" value="uniquename6" /></td>
</tr>
</table>
</div>
<div id="canbeselectedwhenever">
<table id="whenever">
<tr>
<td class="name">whenever-a</td>
<td class="button">
<input type="checkbox" name="whenever" value="uniquename7" /></td>
</tr>
<tr>
<td class="name">whenever-b</td>
<td class="button">
<input type="checkbox" name="whenever" value="uniquename8" /></td>
</tr>
</table>
</div>
</form>
so if a checkbox/radio button from group1 or group2 is selected before an input from NECESSARY, the checkbox/radio button won't be selected, and will show an alert on the screen. however, an input from "whenever" can be selected without requiring an input from "necessary" to be selected.
sorry for the question, but I'm really incredibly appreciative of any help that can be given.
thank you :)

I made a fiddle.
FIDDLE
Find .addEventListener info.
Javascript Code:
// get all the input elements
var inputs = document.getElementsByTagName("input");
var temp = []; // holds the radio/checkboxes
var necessary = []; // holds the necessary elements
for(var i = 0; i < inputs.length; i++){
if(inputs[i].name !== "necessary")
temp.push(inputs[i]);
else
necessary.push(inputs[i]);
}
inputs = temp.slice(0); // get a copy of the temp array and store in inputs
for(var i = 0;i < inputs.length; i++){
// add an event listener which fires the `mouseDown` on 'click'
if(inputs[i].name !== "whenever") // `whenever` elements do not undergo checks
inputs[i].addEventListener("click", mouseDown, false);
}
function mouseDown(checkbox){
var any_checked = false; // is any radio button checked ?
for(var i = 0; i < necessary.length; i++){
if(necessary[i].checked){ // if any is checked
any_checked = true; // any radio is checked = true
break; // come out of loop
}
}
if(! any_checked){ /// if nothing is checked
alert("You left all fields blank."); // alert user
for(var i = 0; i < inputs.length; i++){
inputs[i].checked = false; // make the checked property false.
}
}
}
Hope that helps!

I think it's a very basic javascript question or so it sounds. You need to add onClick event handler to the element on selection of which you want to check that if condition. Then you need to learn how to read the value of an element (hint document.getElementById(id)) and I guess thats all. Google onclick, checkbox value and other terms or read w3schools.com

How to use javascript to select a row of radio buttons when a checkbox is selected

What I need to do is check to see if the checkbox is checked, and if so, select all the radio buttons located within the same element?
I've set up the elements with id's, b/c that is the "physical" grouping of the elements that will be affecting each other.
I'm trying to do something like this onchange('some_row_id'):
function select_row(row_id) {
// Get 1st td element (where checkbox is located) and assign its
// checked value to variable "checked"
var checked = document.getElementById(row_id).td[0].input.checked;
if(checked) {
var children = document.getElementById(row_id).childNodes;
for(var i = 0; i< children.length; i++) {
if(children.td.type == radio) {
children.td.radio = checked;
}
}
}
}
I know that javascript is almost 200% wrong, but I can't figure out how to properly select only td children (or prefereably, only input grandchildren) of a tr element and check them.
Here's the basic form structure in actual working html:
<form name="form2" action="testfile4.php" method="get">
<table border="1"><thead>
<tr><th>Select entire row</th><th>item_code</th><th>description</th><th>page</th>
</tr>
</thead>
<tbody>
<tr id="534">
<td ><input type="checkbox" onchange="select_row(534);"></td> <td>15038 <input type="radio" name="15819-038|item_code" value="534" /></td>
<td>For 1st item, alternate 1
<input type="radio" name="15819-038|description" value="534" /></td>
<td>5
<input type="radio" name="15819-038|page" value="534" /></td>
</tr>
<tr id="535">
<td ><input type="checkbox" onchange="select_row(535);"></td> <td>15038 <input type="radio" name="15819-038|item_code" value="535" /></td>
<td>For 1st item, alternate 2 <input type="radio" name="15819-038|description" value="535" /></td>
<td>5
<input type="radio" name="15819-038|page" value="535" /></td>
</tr>
</tbody>
</table>
</form>
EDIT:
I'm willing to accept jquery solutions. Thank you.
EDIT 2:
Thanks to nnnnnn. I used your JS and added this to have the uncheck behavior I wanted. If you want you can update your answer with it and I'll remove it from here:
else if (!row.cells[0].childNodes[0].checked) {
inputs = row.getElementsByTagName("input");
for(var i=0; i<inputs.length; i++) {
if(inputs[i].type === "radio") {
inputs[i].checked = false;
}
}
}

Well here's one way to do it:
function select_row(row_id) {
// get a reference to the row based on the id passed in
var row = document.getElementById(row_id),
inputs;
// .cells[0] gives the row's first td element,
// then .childNodes[0] gives that td's first child element which
// will be the checkbox
if (row.cells[0].childNodes[0].checked) {
// getElementsByTagName gives all descendent elements with the matching
// tag, not just direct children, so get all the inputs for the current
// row and loop through them looking for the radios
inputs = row.getElementsByTagName("input");
for (var i=0; i<inputs.length; i++) {
if (inputs[i].type==="radio")
inputs[i].checked = true;
}
}
}
And change your checkbox to use onclick=... instead of onchange=....
Note that using checkboxes to select a row doesn't really make sense because after selecting one, if you click another row's checkbox the first row's checkbox is still checked. You might be better off with a button or <a> element for this purpose.
Note also that instead of passing the row ID to the function and then getting a reference to that row using the ID, like this:
<input type="checkbox" onclick="select_row(534)">
function select_row(row_id) {
var row = document.getElementById(row_id);
// etc
You can directly pass a reference to the checkbox that was clicked and use that instead:
<input type="checkbox" onclick="select_row(this);">
function select_row(cb) {
var row = cb.parentNode.parentNode;
if (cb.checked) {
// etc
However in my full solution above I stuck with passing the ID like you did in case you are calling the function from somewhere other than just the click event.
There were several things wrong with your code as posted:
You can't get children of a particular element just by refering to their type, e.g., getElementById(row_id).td[0].input doesn't work. To get the first td you can use a row's cells collection and say .cells[0] (like in my code).
Your for loop doesn't use the i variable within the loop to select the individual items. You should've said children[i] within the loop.
Your if statement: if(children.td.type = radio) { is doing an assignment (single = sign) instead of a comparison (double == or triple === equals sign), and should be comparing to the string "radio" (with quotes).

If you want jquery solution then here it is:
$(document).ready(function() {
$("#your_checkbpx_id").click(function() {
if($(this).is(":checked")) {
//select all your radio
var id = $(this).attr("id");
$("tr[id='"+id+"'] > input[type='radio']").each(function() {
//make it checked
$(this).attr("checked", "checked");
});
}
});
});
Hope it helps

Here is a way:
<script type="text/javascript">
/*
Loops through all input elements finding all checkboxs.
Testing if the current checkbox obj is equal to the selected checkbox object.
If equal: Set the radio button to the current state of the checkbox.
Not equal: Set its children radio buttons checked property false
--------------------------------------------------------------------------- */
function setCheckboxs(checkBox) {
var parent, i;
var checkBoxs = document.getElementsByTagName("input");
for (i = 0; i < checkBoxs.length; i++) {
if (checkBoxs[i].getAttribute("type") === "checkbox") {
parent = checkBoxs[i].parentNode.parentNode;
if (checkBox === checkBoxs[i]) {
toggleRadios(parent.childNodes, checkBoxs[i].checked);
} else {
checkBoxs[i].checked = false;
toggleRadios(parent.childNodes, false);
}
}
}
}
/*
Loops through all its children nodes finding a node's attribute equal to radio
----------------------------------------------------------------------------------- */
function toggleRadios(radios, isChecked) {
var i;
for (i = 0; i < radios.length; i++) {
if (radios[i].childNodes.length > 0) {
toggleRadios(radios[i].childNodes, isChecked);
}
if (radios[i].nodeName === "INPUT") {
if (radios[i].getAttribute("type") === "radio") {
radios[i].checked = isChecked;
}
}
}
}
</script>
<table border="1">
<thead>
<tr>
<th>
Select entire row
</th>
<th>
item_code
</th>
<th>
page
</th>
<th>
usd_dn
</th>
</tr>
</thead>
<tbody>
<tr id="534" class="15838">
<td>
<input type="checkbox" onclick="setCheckboxs(this);" />
</td>
<td>
15838<input type="radio" name="15838|item_code" value="534" />
</td>
<td>
284<input type="radio" name="15838|page" value="534" />
</td>
<td>
$73.00<input type="radio" name="15838|usd_dn" value="534" />
</td>
</tr>
<tr id="535" class="15838">
<td>
<input type="checkbox" onclick="setCheckboxs(this);" />
</td>
<td>
15838
<input type="radio" name="15838|item_code" value="535" />
</td>
<td>
299
<input type="radio" name="15838|page" value="535" />
</td>
<td>
$73.00<input type="radio" name="15838|usd_dn" value="535" />
</td>
</tr>
<tr id="565">
<td>
<input type="checkbox" onclick="setCheckboxs(this);" />
</td>
<td>
1611
<input type="radio" name="1611|item_code" value="565" />
</td>
<td>
66<input type="radio" name="1611|page" value="565" />
</td>
<td>
$3,350.00
<input type="radio" name="1611|usd_dn" value="565" />
</td>
</tr>
<tr id="566">
<td>
<input type="checkbox" onclick="setCheckboxs(this);" />
</td>
<td>
1611
<input type="radio" name="1611|item_code" value="566" />
</td>
<td>
66<input type="radio" name="1611|page" value="566" />
</td>
<td>
$3,225.00
<input type="radio" name="1611|usd_dn" value="566" />
</td>
</tr>
</tbody>
</table>