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