How to check checkboxs based on text string HTML/JS

Question

Is it possible to check checkbox based on string text using js or jQuery:

$(':checkbox').filter(function() {
  return $(this).parent().next('label').text() === 'Text 1';
}).prop('checked', true);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="selectit"><input value="171" type="checkbox" name="post_category[]" id="in-category-171">Text 1</label>
<label class="selectit"><input value="172" type="checkbox" name="post_category[]" id="in-category-172">Text 2</label>
<label class="selectit"><input value="173" type="checkbox" name="post_category[]" id="in-category-173">Text 3</label>

(JSFiddle)

Andy · Accepted Answer · 2022-08-09 11:28:40Z

A JS example. It grabs the labels, finds the label with the text you pass in as an argument to the function, and if that label is found checks it's corresponding checkbox.

function checkBoxFromLabelText(str) {

  // Select all the labels and coerce the array-like node-list
  // into an array
  const labels = [...document.querySelectorAll('label')];

  // `find` the label with the text content you supplied
  // as a string argument to the function
  const label = labels.find(label => label.textContent.trim() === str);

  // If it exists find the label's checkbox and check it
  if (label) label.querySelector('[type="checkbox"]').checked = true;

}

checkBoxFromLabelText('Text 1');

<label class="selectit"><input value="171" type="checkbox" name="post_category[]" id="in-category-171">Text 1</label>
<label class="selectit"><input value="172" type="checkbox" name="post_category[]" id="in-category-172">Text 2</label>
<label class="selectit"><input value="173" type="checkbox" name="post_category[]" id="in-category-173">Text 3</label>

Rory McCrossan · Accepted Answer · 2022-08-09 11:08:47Z

1

Your code is almost there, you just need to remove next('label') as parent() already gives you a reference to the label.

Also note that you can make the code a little more succinct with an arrow function:

$(':checkbox').filter((i, el) => $(el).parent().text().trim() === 'Text 1').prop('checked', true);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="selectit"><input value="171" type="checkbox" name="post_category[]" id="in-category-171">Text 1</label>
<label class="selectit"><input value="172" type="checkbox" name="post_category[]" id="in-category-172">Text 2</label>
<label class="selectit"><input value="173" type="checkbox" name="post_category[]" id="in-category-173">Text 3</label>

answered Aug 9, 2022 at 11:08

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

3 Comments

EnigmaOs Over a year ago

Sir, I Try it with the same HTML code here but is not working, what I need to solve it

Daniel Beck Over a year ago

@EnigmaOs In your jsfiddle you have two separate form elements wrapped in the same <label> element; log the text you're trying to compare against and you'll see its .text() actually returns " text 1Make Term Primary".

Daniel Beck Over a year ago

(You're also going to have whitespace trouble; reformatting the HTML could insert or remove spaces that will break that text matching. Use trim() as suggested in Rory's answer, or better yet put a real identifier attribute on these things instead of trying to match against user-visible strings.)

Collectives™ on Stack Overflow

How to check checkboxs based on text string HTML/JS

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related