How to select checkboxes based on text content?

Question

I have a table with multiple checkboxes. In JavaScript/JQuery I want to select all of them but a couple based on the text content in that table data. So, it should select all checkboxes except if the text content is equal to '899', etc. This is what I have currently:

$('#select-all').click(function (event) {
    if (this.checked) {
        var items = document.getElementsByClassName('col-store_number');
        for (var i = 0; i < items.length; i++) {
            if (items[i].textContent === 899) {
                items[i].checked = false;
            } else {
                items[i].checked = true;
            }
        }
    }
});

When I check the select all box it doesn't select anything, so its likely making them all false instead of just the 899 one. I did a console.log(items[i].textContent); and it did return the right values, so I'm getting the right text content.

Here is what the table looks like -

<td class="col-store_number">899</td>

And here is the checkbox -

<input type="checkbox" name="" value="94" id="id_94" class="checkbox admin__control-checkbox" checked="checked">

It still does the same thing when I add the quotes, or use parseInt — Mackenzie, Aug 30 '18 at 20:12
Please share the html , it is not possible to know what `items[i].textContent` means since you want to get the text of checkbox — brk, Aug 30 '18 at 20:16
I think the problem is actually checking the box, not the `if` statement. see here: https://stackoverflow.com/questions/426258/setting-checked-for-a-checkbox-with-jquery — full-stack, Aug 30 '18 at 20:18
Do you have the checkbox elements in a neighboring cell to the text? — Carsten Massmann, Aug 30 '18 at 21:22
Yes - I realize now that I need to find the checkboxes after my if test, or something like that — Mackenzie, Aug 30 '18 at 21:42
Please share a portion of the html table with relevant data to the exercise — Mario, Aug 30 '18 at 21:44

Carsten Massmann · Answer 1 · 2018-09-01T00:25:32.443

( I deleted my first faulty attempt here )

The second version was:

If the checkbox is found in the cell immediately following the cell containing the text then you should do the following (edited - now everything is done "in one line"):

$('#select-all').click(function () {
    $('td.col-store_number:not(:contains(899))')
      .next().find('input:checkbox').prop('checked', this.checked)
});

And a slightly improved third version is here (working demo, using ES6 code):

$('#select-all').click(function () {
   $('td.col-store_number')
      .filter((i,el)=>el.textContent!='899')
      .parent().find('input:checkbox')
      .prop('checked', this.checked)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
master switch:<input type="checkbox" id="select-all" checked="checked">
<table>
<tr><td class="col-store_number">899</td><td>Some other content</td><td><input type="checkbox" name="" value="94" id="id_90" class="checkbox admin__control-checkbox" checked="checked"></td></tr>
<tr><td class="col-store_number">4711</td><td>and more content</td><td><input type="checkbox" name="" value="94" id="id_91" class="checkbox admin__control-checkbox" checked="checked"></td></tr>
<tr><td class="col-store_number">899</td><td>other content</td><td><input type="checkbox" name="" value="94" id="id_92" class="checkbox admin__control-checkbox" checked="checked"></td></tr>
<tr><td class="col-store_number">0815</td><td>yet some more</td><td><input type="checkbox" name="" value="94" id="id_93" class="checkbox admin__control-checkbox" checked="checked"></td></tr>
<tr><td class="col-store_number">899</td><td>here too</td><td><input type="checkbox" name="" value="94" id="id_94" class="checkbox admin__control-checkbox" checked="checked"></td><td>Just for the sake of it</td></tr>
<tr><td class="col-store_number">007</td><td>yeah, and here.</td><td><input type="checkbox" name="" value="94" id="id_95" class="checkbox admin__control-checkbox" checked="checked"></td><td>there can be text here too ...</td></tr>
<tr><td class="col-store_number">53</td><td>I am</td><td><input type="checkbox" name="" value="94" id="id_96" class="checkbox admin__control-checkbox" checked="checked"></td></tr>
<tr><td class="col-store_number">899</td><td>getting tired</td><td><input type="checkbox" name="" value="94" id="id_97" class="checkbox admin__control-checkbox" checked="checked"></td></tr>
<tr><td class="col-store_number">1899</td><td>of this</td><td><input type="checkbox" name="" value="94" id="id_98" class="checkbox admin__control-checkbox" checked="checked"></td><td>extra checkbox:</td></tr>
<tr><td class="col-store_number">8995</td><td>...</td><td><input type="checkbox" name="" value="94" id="id_99" class="checkbox admin__control-checkbox" checked="checked"></td><td><input type="checkbox" checked="checked"></td></tr>
</table>

This latest version is a bit more tolerant as to the table layout: it looks for all cell of class "col-store_number" having a text content different from 899 and sets/unsets the tick marks for all checkboxes found in the same table row.

When I try this, the 'select all' checkbox only selects or unselects itself. It does not effect the other checkboxes. — Mackenzie, Aug 30 '18 at 20:56
No, a check-box - like all `` elements - is an [empty element](https://developer.mozilla.org/en-US/docs/Glossary/empty_element); therefore it cannot contain text, or anything else. — David Thomas, Aug 30 '18 at 20:59

score 0 · Answer 2 · edited Aug 30 '18 at 21:58

Here is the working example:

https://codebrace.com/editor/b1da3a821

Instead of textContent you should use value to get the values inside input type. The value is usually in string format.

$(document).ready(function () {
    $('#select-all').click(function (event) {
        var items = document.getElementsByClassName('col-store_number');

        for (var i = 0; i < items.length; i++) {
            if (items[i].value == "899") {
                items[i].checked = false;
            } else {
                items[i].checked = true;
            }
        }
    });
});

or you could use parseInt(items[i].value) === 899, if you really want to check the value with an Integer.

I hope you were expecting this! :)

How to select checkboxes based on text content?

2 Answers2