We Keep Coding

Javascript / Jquery extract whole CLASS descriptor from a partial selection descriptor

I have a Javascript / Jquery function that controls groups of checkboxes.
The checkboxes are created on PHP form from a database call so I am iteratively going through a recordset and creating checkboxes in html.
For each checkbox I assign it a class of "checkboxgroup" + a numeric identifier to create a group of 'like' records.
I end up with multiple checkboxes like this:
<tr class="tablebody">
<td><input name="contactresolveid2048" id="contactresolveid2048" type="checkbox" class="checkboxgroup0"/></td>
<td>David Smith</td>
</tr>
<tr class="tablebody">
<td><input name="contactresolveid19145" id="contactresolveid19145" type="checkbox" class="checkboxgroup0"/></td>
<td>graham Foots</td>
</tr>
<tr class="tablebody">
<td><input name="contactresolveid19146" id="contactresolveid19146" type="checkbox" class="checkboxgroup0"/></td>
<td>Tom Silly</td>
</tr>
As you can see, these 3 checkboxes have a class of 'checkboxgroup0'
The following function detects a click on ANY of the checkbox groups on a form (of which there may be many) and unchecks any checkboxes (belonging to the same group) that are not the clicked one.
$('[class^="checkboxgroup"]').click(function() {
var thisClass = $(this).attr('class');
var $checkboxgroup = $('input.'+thisClass);
$checkboxgroup.filter(':checked').not(this).prop('checked', false);
});
Under most circumstances this works fine when the only class is 'checkboxgroup0'.
However when validation takes place JQuery validate appends a 'valid' or 'error' class to the class list of any fields that pass or fail validation, so I can endup having an .attr(class) of 'checkboxgroup0 valid'.
My question is this:
How do I return the whole class name of the partially selected class WITHOUT any extraneous classes?
By using the selector $('[class^="checkboxgroup"]') I need the whole part of that selector 'checkboxgroup0' and no other classes that may be assigned to it.

This issue you've encountered is one of the reasons why using incremental id/class attributes are not good practice.
To work around this issue with your JS you can instead use the same class on every checkbox. You can then group them by a data attribute instead. Using this method means that the number of classes on an element or their position within the class attribute string does not matter.
Try this example:
$('.checkboxgroup').click(function() {
let $this = $(this);
let $group = $(`.checkboxgroup[data-group="${$this.data('group')}"]`);
$group.not(this).prop('checked', false);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr class="tablebody">
<td><input name="contactresolveid2048" id="contactresolveid2048" type="checkbox" class="checkboxgroup" data-group="0" /></td>
<td><label for="contactresolveid2048">David Smith</label></td>
</tr>
<tr class="tablebody">
<td><input name="contactresolveid19145" id="contactresolveid19145" type="checkbox" class="checkboxgroup" data-group="0" /></td>
<td><label for="contactresolveid19145">graham Foots</label></td>
</tr>
<tr class="tablebody">
<td><input name="contactresolveid19146" id="contactresolveid19146" type="checkbox" class="checkboxgroup" data-group="0" /></td>
<td><label for="contactresolveid19146">Tom Silly</label></td>
</tr>
</table>
However, it's worth noting that what you're attempting to do can be far better achieved using HTML alone. Simply use a radio input and give them all the same name attribute, then you get the behaviour you're trying to create for free:
<table>
<tr class="tablebody">
<td><input name="contactresolve" id="contactresolveid2048" type="radio" /></td>
<td><label for="contactresolveid2048">David Smith</label></td>
</tr>
<tr class="tablebody">
<td><input name="contactresolve" id="contactresolveid19145" type="radio" /></td>
<td><label for="contactresolveid19145">graham Foots</label></td>
</tr>
<tr class="tablebody">
<td><input name="contactresolve" id="contactresolveid19146" type="radio" /></td>
<td><label for="contactresolveid19146">Tom Silly</label></td>
</tr>
</table>

how to select all checkbox inside td

i'm just learned the javascript. i'm trying to make a simple front-end for practice. so, i've been struggling to select all checkbox inside 'td'.
<table>
<tr class="top1000">
<td><input type="checkbox" onclick="ropangTopping()"><label>milo</label></td>
<td><input type="checkbox" onclick="ropangTopping()"><label>chocolate</label></td>
<td><input type="checkbox" onclick="ropangTopping()"><label>chocochip</label></td>
<td><input type="checkbox" onclick="ropangTopping()"><label>koko krunch</label></td>
</tr>
<tr class="top3000">
<td><input type="checkbox" onclick="ropangTopping()"><label>mozarella</label></td>
<td><input type="checkbox" onclick="ropangTopping()"><label>cheddar</label></td>
<td><input type="checkbox" onclick="ropangTopping()"><label>green tea</label></td>
<td><input type="checkbox" onclick="ropangTopping()"><label>boba</label></td>
</tr>
</table>
when i initialized with this var topping1000 = document.querySelector(".top1000 td input[type=checkbox]");, it just select the first checkbox. but when i use querySelectorAll it didn't select anything. i know this is a silly question. any answer would be appriciated it. thanks in advance.

You're almost there. You do need to use
querySelectorAll()
to grab all the nodes.
But then you need to loop through those nodes and check each one in turn.
One way to do this (there are several) might be to use a forEach loop:
toppings1000.forEach((topping1000) => {topping1000.checked = true;});
N.B. Note the names of the variables I'm using immediately above. I'm distinguishing between the collection of multiple nodes (toppings1000):
toppings1000 // with an 's' to indicate that it's a plural set
and the individual node in each iteration of the forEach loop (topping1000):
topping1000 // no 's' this time - it's just a single node
Working Example:
var toppings1000 = document.querySelectorAll(".top1000 td input[type=checkbox]");
toppings1000.forEach((topping1000) => {
topping1000.checked = true;
});
<table>
<tr class="top1000">
<td><input type="checkbox" onclick="ropangTopping()"><label>milo</label></td>
<td><input type="checkbox" onclick="ropangTopping()"><label>chocolate</label></td>
<td><input type="checkbox" onclick="ropangTopping()"><label>chocochip</label></td>
<td><input type="checkbox" onclick="ropangTopping()"><label>koko krunch</label></td>
</tr>
<tr class="top3000">
<td><input type="checkbox" onclick="ropangTopping()"><label>mozarella</label></td>
<td><input type="checkbox" onclick="ropangTopping()"><label>cheddar</label></td>
<td><input type="checkbox" onclick="ropangTopping()"><label>green tea</label></td>
<td><input type="checkbox" onclick="ropangTopping()"><label>boba</label></td>
</tr>
</table>

How to get all input values on a table TR (by ID)

how are you?
How can I get all values of a inputs inside a one TR in a table? I'd find examples, with not for a specific row (with ID)
I have this table:
<table>
<tr id="a">
<td><input id="a_01" value="the value of a_01"></td>
<td><input id="a_02" value="the value of a_02"></td>
</tr>
<tr id="b">
<td><input id="b_01" value="the value of b_01"></td>
<td><input id="b_02" value="the value of b_02"></td>
</tr>
</table>
For example: i'm triying to get all value inputs of a tr with id="b".
Thanks a lot for yout help!

You can use a selector to target the elements. To do so, you don't need jQuery, since you can use the querySelector and querySelectorAll functions:
document.querySelector('button').addEventListener('click', function(){
// Radio input value
var value = document.querySelector('input[name="idvalue"]:checked').value;
// Here's the selector for the input elements
var elements = document.querySelectorAll('#' + value + ' input');
// You can iterate the result and use the element values
elements.forEach(e => {console.log(e.id + ': ' + e.value);});
});
<table>
<tr id="a">
<td><input id="a_01" value="the value of a_01"></td>
<td><input id="a_02" value="the value of a_02"></td>
</tr>
<tr id="b">
<td><input id="b_01" value="the value of b_01"></td>
<td><input id="b_02" value="the value of b_02"></td>
</tr>
</table>
<div>
<input type="radio" name="idvalue" id="radioa" value="a" checked /><label for="radioa">Show values for #a</label>
<input type="radio" name="idvalue" id="radiob" value="b" /><label for="radiob">Show values for #b</label>
</div>
<button>Show Values of selected #id</button>
If you really really need t do it in jquery, you can use the same selector to target the elements: $("#b input").
I suggest you further read about selectors. Here's the MDN link.

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());
}
});
});
});

Javascript - Checkboxes to hide columns

I'm having issues with some JS code that hides columns based off the state of a checkbox, and I'm hoping to get some help.
The check boxes are in a table. The table has multiple rows. eg:
1, 2
3, 4
Those check boxes correspond to columns in another maintable. That maintable is a single row across. eg: 1, 2, 3, 4
When I uncheck boxes 1 & 2 from the the table, it hides row 1 & 2 from the main table. But if I uncheck boxes 3 & 4, it also hides row 1 & 2.
If the check boxes from the table are on a single line, then they hide all the columns as intended. But because they are broken up via table-row, there is an issue.
$(function() {
$("#checkboxes input[type=checkbox]").on("change", function(e) {
var id = $(this).parent().index()+1,
col = $("#table tr th:nth-child("+id+"), #table tr td:nth-child("+id+")");
$(this).is(":checked") ? col.show() : col.hide();
}).prop("checked", true).change();
});
Here is a fiddle. Any help will be greatly appreciated.
https://jsfiddle.net/o6e3pc3a/7/
Thanks

You have a problem with the table rows when you call to $(this).parent().index()+1 beacause you have the <td> tag in two rows which means that it is going to return the position inside <tr> and in every new <tr> the count start in 1 again.
You have two solutions for that:
1- You can put all the checkboxes inside one row:
<tr>
<td><input type="checkbox" name="option1" value="eventid" />Name</td>
<td><input type="checkbox" name="option2" value="groupid" />ID</td>
<td><input type="checkbox" name="option3" value="pathfile" />Type</td>
<td><input type="checkbox" name="option4" value="filesize" />Number</td>
</tr>
Here's an example JS Fiddle Example 1
2- Or you can just add an attribute data-id with the value of the column's position:
<tr>
<td><input type="checkbox" data-id="1" name="option1" value="eventid" />Name</td>
<td><input type="checkbox" data-id="2" name="option2" value="groupid" />ID</td>
</tr>
<tr>
<td><input type="checkbox" data-id="3" name="option3" value="pathfile" />Type</td>
<td><input type="checkbox" data-id="4" name="option4" value="filesize" />Number</td>
</tr>
And then catch it in js:
$(function() {
$("#checkboxes input[type=checkbox]").on("change", function(e) {
var id = $(this).attr('data-id'),
col = $("#table tr th:nth-child("+id+"), #table tr td:nth-child("+id+")");
$(this).is(":checked") ? col.show() : col.hide();
}).prop("checked", true).change();
});
Here's an example JS Fiddle Example 2
If you don't mind the style of the page I recommend de first one. If not, the second one is more dynamic

Agree with #joac omf .
Because the <chekcbox> are the childen of <td> tags. They are not sibling, so the index is incorrect.

The index is 'incorrect' because you have the checkboxes split into two table rows.
Put the checkboxes in one row <tr> and they work correctly.
<tr>
<td><input type="checkbox" name="option1" value="eventid" />Name</td>
<td><input type="checkbox" name="option2" value="groupid" />ID</td>
<td><input type="checkbox" name="option3" value="pathfile" />Type</td>
<td><input type="checkbox" name="option4" value="filesize" />Number</td>
</tr>
https://jsfiddle.net/o6e3pc3a/8/