Tick the Checkbox next to the Text that is in a different table data <td>

Objective: Tick the checkbox next to the date (text) by using a JavaScript command in FireFox console or Chrome

<tr style="color:#333333;">
  <td>
    <input name="#ctl00$bc$custom$element$43$0" type="checkbox" id="#ctl00_bc_custom_element_43_0" onclick="CheckChanged();">
  </td>
  <td>Garage</td>
  <td>
    <b>15:00 - Wed,19 Mar, 2018</b>
  </td>
</tr>

As you see the checkbox has an Id but the date is a simple bolded text. This is from a website that I have no control over the source code. It’s just loaded into my browser. So I can’t edit it.

By running the following code in FireFox console:

document.getElementById('#ctl00_bc_custom_element_43_0').checked = true;

I can tick the checkbox. But I want to tick that checkbox by using the date (text) in front of it. Unfortunately the text has no Id.
How should I change the JavaScript command above to tick that checkbox? For the sake of arguement something like this?

document.getElementById('15:00 - Wed,19 Mar, 2018').checked = true;

I have used different firefox plugins for the purpose of ticking the checkbox, bus since the checkbox and date (text) are in different <td> I get nothing.

Hi there tahmoorespost,

and a warm welcome to these forums. :winky:

JavaScript is not required for "ticking " checkbox elements. :eek:

It is the job for the label element. :winky:

Here is a basic example…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>The label element</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">

body {
    background-color: #f9f9f9;
    font: 100% / 162% BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
 }

#content {
    color: #333;
 }

#content label {
    font-weight: bold;
    cursor: pointer;
 }

#content label:hover, 
#content label:active {
    color: #c00;
 }
</style>

</head>
 <div id="content">
  <input type="checkbox"  name="#ctl00$bc$custom$element$43$0" id="ctl00_bc_custom_element_43_0">
  Garage
  <label for="ctl00_bc_custom_element_43_0"> 15:00 - Wed,19 Mar, 2018</label>
 </div>

</html>

As for your original question, this javascript…

<script>
(function( d ) {
    'use strict';
    var bold = d.getElementsByTagName( 'b' );
    for ( var c = 0; c < bold.length; c ++ ) {
       if ( bold[ c ].textContent === '15:00 - Wed,19 Mar, 2018' ) {
           d.getElementById('#ctl00_bc_custom_element_43_0').checked = true;
        }
       } 
}(document));
</script>

…should do the job. :biggrin:
coothead

First you need to find the element that has the appropriate date:

var dates = document.querySelectorAll("b");
var correctDate = Array.from(dates).find(function (date) {
  return date.textContent === "15:00 - Wed,19 Mar, 2018";
});

When the correct date has been found, you then need to walk up the DOM to the nearest TR element.

function upTo(elName, from) {
  var target = from.parentNode;
  while (target.nodeName !== elName.toUpperCase() && target.nodeName !== "HTML") {
    target = target.parentNode;
  }
  return target;
}
var row = upTo("tr", correctDate);

And now that you’ve found the appropriate row, you can check the input field.

row.querySelector("input").checked = true;

Hi there Paul,

to me, it seems that you have used a lot of lines for the task. :wonky:

I admit to being a dilettante when it comes to Javascript, so is
there something inherently wrong with my four lines of script? :confused:

coothead

I think you missed this

Having different HTML that would allow simpler JavaScript is a good idea, but when stuck with what one’s stuck with there are times the ideal isn’t an option.

1 Like

I only missed …

I have no control over the source code

… when I was pointing out that JavaScript was not
actually required for “ticking” checkbox elements. :winky:

Directly after my decidedly smug reply I did notice it…

As for your original question, this javascript…

…and edited it with this a javascript solution that worked
with just four lines of code…

<tr style="color:#333333;">
  <td>
    <input name="#ctl00$bc$custom$element$43$0" type="checkbox" id="#ctl00_bc_custom_element_43_0" onclick="CheckChanged();">
  </td>
  <td>Garage</td>
  <td>
    <b>15:00 - Wed,19 Mar, 2018</b>
  </td>
</tr>

<script>
(function( d ) {
    'use strict';
    var bold = d.getElementsByTagName( 'b' );
    for ( var c = 0; c < bold.length; c ++ ) {
       if ( bold[ c ].textContent === '15:00 - Wed,19 Mar, 2018' ) {
           d.getElementById('#ctl00_bc_custom_element_43_0').checked = true;
        }
       } 
}(document));
</script>

…which, to me, does appear to be inherently right. :biggrin:

coothead

That does work in the specific example, but fails in a more general situation where the date and the id differ. The id being the more difficult one to deal with, which is what I focused on.

Just because he can’t change the page, doesn’t mean that the page won’t change.

2 Likes

What about this page?
http://niemand.gigfa.com/as/testas.html

Honestly [as I’m just a beginner] during the last month I could only manage to run the scripts introduced here in this way:

By going to Firefox Console (Ctrl+Shift+K) and running this script:
document.getElementById('ctl03_dg_ctl02_EmpId').click();
I managed to mark the second checkbox on the left. As you see, marking the checkbox is achieved by using its id.

But the script I’m looking for should also be able to find the strings next to that checkbox “TestAS - Deutsch” and " 08:30 - Sat,26 Oct, 2019" and without naming the checkbox id in the script… and then mark it.

I found this topic on stackoverflow useful, but non of the solutions explained how to mark that checkbox by not using the checkbox id…

The point here is to mark the checkbox without clicking it, by using strings next to it, and only by a single command.

Is it always both the language and the date that must be found? Or can we get away with only one or the other?

Because, the following works:

Array.from(document.querySelectorAll("td")).filter(
    td => td.textContent === "TestAS - Deutsch"
)[0].parentNode.querySelector("input").click();

Using includes helps to find a partial match.

Array.from(document.querySelectorAll("td")).filter(
    td => td.textContent.includes("10:30 - Sun,21 Jul, 2019")
)[0].parentNode.querySelector("input").click();
1 Like

That works perfectly.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.