How do you check only boxes with certain <p> tags in their <label>

JavaScript
1

I have a page that I am ‘testing’, and want to quickly check a list of a random number of items, possibly 20 - 30 or so items. Each item has 2 groups of 3 check boxes. To submit the form one check box from each group must be checked. The code for ONE of these boxes is below. I need to select the check box in the <input> tag based on the <p>I need more information</p> element in the <label> for that box.

In other words, I want to select all the checkboxes with the label containing

tag of “I need more information”, as well as one other but if I have that much I can get the rest.

The HTML is here, and below that is the code I have so far:

<div class="select-item" data-ng-repeat="item in vm.items track by item.id">
        <input type="checkbox" id="cme-select-3123-2" data-ng-change="vm.onChange($index)" data-ng-model="vm.selectedItems[$index]" class="ng-pristine ng-untouched ng-valid ng-empty">

        <label class="select-item-text not-selected" for="cme-select-3123-2" data-ng-class="{'selected': vm.output === item.id,
                        'not-selected': vm.output !== item.id &amp;&amp; vm.output &amp;&amp; vm.output.length}">
            <p>I need more information</p>
        </label>
    </div>

So far I have tried this in the console, but this selects ALL boxes. (of course, querySelectorAll). Maybe I need a refresher on the DOM selectors in JS, but I can’t figure out how to select based on the

tag in the tag>.

Thanks in advance for any help

(function() {
    var aa = document.querySelectorAll("input[type=checkbox]");
    for (var i = 0; i < aa.length; i++){
        aa[i].checked = true;
    }
 })()
3

so like this? (pseudocode)

find the input elements with type checkbox
get the parent element
get that elements <p> element
Check for matching {
     check it if true
}
6

Except do I have to do it like this:

  1. Create an array with this:
find the input elements with type checkbox
get the parent element
get that elements <p> element
Check for matching
  1. Loop through the array and select those checkboxes ?
7

Awesome thanks so much for your help.
By this time I could have gotten through the testing but I’d rather create a tool to save time in the future! THank you.

9

I’ve managed to make progress, but I’m confused on structuring the query. The code I have below selects EVERY checkbox on the page, and changes it’s text to “clinical manifestations”

Any ideas why this might be happening?

const x = document.getElementsByClassName("select-item") 

for (i=0; i<x.length; i++) {
let paragraph =  x[i].querySelector("p")
    if ( paragraph.innerText = 'Clinical Manifestations') 
    
    { 
        if (innerText = 'This reinforced my plan') {
            x[i].querySelector("input").click()
        }
       
    }
}

Here is the DOM Structure slightly simplified

<html>  //contains ~10-20 cme containers 
   <div class="cme-container">   //contains 2 groups of input items
      <cme-select id="$parent.$index"> //this is group 1
         <div class="select-container"> //this contains 6 select- item inputs
            <div class="select-item"> //there are 6 of these in every "group 1"
               <input type="checkbox">
               <label>
                  <p>Treatment</p> //this is the one I want to select from group 1
      <cme-select id = "$parent.$index"> //this is group 2
         <div class="select-container"> //this contains 6 select- item inputs
            <div class="select-item"> //there are 3 of these in every "group 2"
               <input type="checkbox"> 
               <label>
                  <p>I need more information</p>  //this is the one I want to select from group 2
11

But when I use the equality operator I get false, even though both sides are typeof() string.

eg.

typeof(x[3].querySelector(“p”).innerText)
string
typeof(‘Clinical Manifestations’)
string

but if ( x[3].querySelector(“p”).innerText===‘Clinical Manifestations’) was giving me a false result (for the correct x array subelement.

I think I"m just tired, so I’m going to take a break and come back to this. I’m sure it’s a minor typo somewhere.

Thanks for your help and attention so far. I’ll keep you updated.

12

If I have:

<div class="cme-container">
  <!-- contains 2 groups of input items -->
  <cme-select id="$parent.$index">
    <!--this is group 1-->
    <div class="select-container">
      <!--this contains 6 select- item inputs-->
      <div class="select-item">
        <!--there are 6 of these in every "group 1"-->
        <input type="checkbox">
        <label>
          <p>Treatment</p>
          <!--this is the one I want to select from group 1-->
        </label>
      </div>
  </cme-select>
  <cme-select id="$parent.$index">
    <!--this is group 2-->
    <div class="select-container">
      <!--this contains 6 select- item inputs-->
      <div class="select-item">
        <!--there are 3 of these in every "group 2"-->
        <input type="checkbox">
        <label>
          <p>Clinical Manifestations</p>
          <!--his is the one I want to select from group 2-->
        </label>
      </div>
    </div>
  </cme-select>

and

const x = document.getElementsByClassName("select-item") 

for (i=0; i<x.length; i++) {
let paragraph =  x[i].querySelector("p")
    if ( paragraph.innerText === 'Clinical Manifestations') 
    
    { 
        if (innerText = 'This reinforced my plan') {
            x[i].querySelector("input").click()
        }
       
    }
}

the checkbox for the p element with text of Clinical Manifestations gets checked when the code executes.

1 Like
13

This worked!

I could swear I had tried this but between the small errors compounding it was not working before. Thanks again!

const x = document.getElementsByClassName("select-item") 

for (i=0; i<x.length; i++) {
    if ( x[i].querySelector("p").innerText==='Treatment') {
   
      x[i].querySelector("input").click()
    } 
    
    if ( x[i].querySelector("p").innerText==='This modified my plan') {
   
      x[i].querySelector("input").click()
    } 
    
}
14

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