Check checkbox whose values are stored in an array

Question

I have this function, where I am currently pre-selecting all checkboxes:

function setupModuleSelection(selectedModules, preSelected) {
    // TODO: preSelected not used
    $('#my-table > tbody > tr > td.module_id > input[type="checkbox"]')
        .prop('checked', true);
}

Where preSelected = ['module-001', 'module-003', 'module-027'] (for example):

The table is:

<tr>
...
<td class="module_id"><input type="checkbox" name="module_id" value="module-027"></td>
</tr>

Now I want to activate the checkboxes by filtering on the module_id, as provided by the preSelected array. How can I do this with jQuery?

@Ramanlfc thats not true.

void
– void

2015-11-30 09:19:54 +00:00
Commented Nov 30, 2015 at 9:19 — void
– void, Commented Nov 30, 2015 at 9:19
what is td.module_id in your jquery selection?

Azad
– Azad

2015-11-30 09:20:39 +00:00
Commented Nov 30, 2015 at 9:20 — Azad
– Azad, Commented Nov 30, 2015 at 9:20
@Azzi: sorry Azzi, that slipped my copy-paste. Added!

blueFast
– blueFast

2015-11-30 09:21:48 +00:00
Commented Nov 30, 2015 at 9:21 — blueFast
– blueFast, Commented Nov 30, 2015 at 9:21

Tushar · Accepted Answer · 2015-11-30 09:27:41Z

3

Use attribute-value selector as follow

var preSelected = ['module-001', 'module-003', 'module-027'];

var selector = ':checkbox[value="' + preSelected.join('"], :checkbox[value="') + '"]';
$(selector).prop('checked', true);

The value of selector will be

:checkbox[value="module-001"], :checkbox[value="module-003"], :checkbox[value="module-027"]

And passing this string to the jQuery object will select all the required checkboxes.

Live Demo:

var vowels = ['a', 'e', 'i', 'o', 'u'];

var selector = ':checkbox[value="' + vowels.join('"], :checkbox[value="') + '"]';
console.log(selector);
$(selector).prop('checked', true);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" name="aa" value="a" /> A
<input type="checkbox" name="bb" value="b" /> B
<input type="checkbox" name="Cc" value="c" /> C
<input type="checkbox" name="dd" value="d" /> D
<input type="checkbox" name="ee" value="e" /> E
<input type="checkbox" name="ff" value="f" /> F
<input type="checkbox" name="ii" value="i" /> I

edited Nov 30, 2015 at 9:27

answered Nov 30, 2015 at 9:22

Tushar

87.4k21 gold badges164 silver badges182 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

blueFast Over a year ago

Mmm, the module_id is not in the name, but in the value in my case (django generated: CheckBoxColumn from django_tables2)

blueFast Over a year ago

Ok, I get it, but, and this might be just me not being that deep into jQuery: is such a (potentially) huge selector performant? Wouldn't it be faster (and clearer) to do a forEach as in void's answer?

void · Accepted Answer · 2015-11-30 09:22:29Z

2

preSelected = ['module-001', 'module-003', 'module-027'];

[].forEach.call(preSelected, function(val){

    $("#my-table input[type='checkbox'][value='"+val+"']").prop('checked', true);

});

You can use something like this, selecting the input based on the value.

answered Nov 30, 2015 at 9:22

void

36.7k10 gold badges71 silver badges111 bronze badges

1 Comment

choz Over a year ago

Ok, I just knew that you can call checkbox value like that.

Milind Anantwar · Accepted Answer · 2015-11-30 09:22:31Z

1

You can join array values to generate attribute equals selector:

$('#my-table > tbody > tr > td.module_id > input[type="checkbox"][value="' + preSelected .join('"],[value="') + '"]').prop('checked', true);

answered Nov 30, 2015 at 9:22

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

Collectives™ on Stack Overflow

Check checkbox whose values are stored in an array

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related