JQuery - check checkboxes based on select list value

Question

Im very, very new to jquery. Im trying to do something that most likely seems elementary to most of the gurus here, but I think I have been messing with it for so long, that I must be overlooking something very simple.

I have a large list of checkboxes (85 in total) that need to be checked based on the value selected in a select list. Both the select list and the checkboxes are created dynamically via an ASP page/database query.

Link to fiddle: http://jsfiddle.net/v9p5C/21/

HTML:

<select id="roleID">
    <option data-filter=''>ID</option>
    <option data-filter='200'>200</option>
    <option data-filter='300'>300</option>
    <option data-filter='400'>400</option>
</select>
<BR>
<BR>
<input type="checkbox" data-tags='["200"]'>Create
<br>
<input type="checkbox" data-tags='["200,300"]'>Edit
<br>
<input type="checkbox" data-tags='["200","300, 400"]'>View
<br>
<input type="checkbox" data-tags='["200"]'>Delete
<br>
<input type="checkbox" data-tags='["200"]'>Archive
<br>

SCRIPT:

$(function () {
    $(document).on('change', function (e) {

        var filter = $(this).data('filter');

        $('input[type="checkbox"]').each(function () {
            var $checkbox = $(this);
            var tags = $checkbox.data('tags');
            $.each(tags, function () {
                if (filter == this) $checkbox.prop("checked", !$checkbox.prop("checked"));
            });
        });

    });
});

I recommend not using the quotes around the data-filter options because you've mixed up a couple of brackets. — Jhecht
– Jhecht, Commented Aug 12, 2014 at 21:55

Gene Parcellano · Accepted Answer · 2014-08-12 21:30:08Z

2

Your jQuery will need to look more like this:

$(function () {
    $('#roleID').on('change', function (e) {

        var filter = $(this).val();

        $('input[type="checkbox"]').removeAttr('checked');
        $('input[type="checkbox"][data-tags*="'+filter+'"]').attr('checked','checked');

    });
});

This is a very simple way of creating that functionality. You can view the fiddle here:

http://jsfiddle.net/m0nk3y/kjnoovL0/1/

answered Aug 12, 2014 at 21:30

Gene Parcellano

6,0545 gold badges40 silver badges45 bronze badges

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

8 Comments

Gene Parcellano Over a year ago

There's room for error in this setup, depending on the values you're checking for. I used the CSS3 selector ([attr*=value]) because it's much easier for newbies, I assume. However, if you have more complex values to check for, you may want to use indexOf() or something similar. Good luck.

Digital Fusion Over a year ago

turns out I need to change this somewhat. New to stackoverflow as well, so I am not sure how to follow up. I guess I need to slightly alter what I am doing as I need to have a load defaults checkbox instead. I kind of have it working in this fiddle (jsfiddle.net/kjnoovL0/5), but the checkbox isnt staying checked.

Gene Parcellano Over a year ago

What is the load defaults checkbox supposed to do?

Gene Parcellano Over a year ago

I noticed that you forgot to put quotes around roleID. var filter = $('#roleID').val();

Digital Fusion Over a year ago

basically, only if the loadDEfaults checkbox is checked, the corresponding options get checked. This is what I am playing with now: jsfiddle.net/kjnoovL0/17.

|

Jeremy Danyow · Accepted Answer · 2014-08-12 21:28:47Z

2

the var filter = $(this).data('filter'); line was attempting to get the data-filter value from the select element, not the selected option element. Here's how you would grab the selection option's data-filter:

var filter = $('option:selected', this).data('filter');

updated fiddle:

http://jsfiddle.net/v9p5C/52/

(there were a couple of other minor bugs in the fiddle that are also fixed)

answered Aug 12, 2014 at 21:28

Jeremy Danyow

26.5k12 gold badges92 silver badges137 bronze badges

3 Comments

Jhecht Over a year ago

Problem with this method is that if he checks something like 200 after checking 300, the two middle ones will not be selected.

Jhecht Over a year ago

jsfiddle.net/v9p5C/54 I just updated your fiddle here and there. I also changed the HTML data-filter options to not include quotes. Since these are numbers, they aren't really necessary.

Jeremy Danyow Over a year ago

agree, I was trying to keep it close to the OP's fiddle

Collectives™ on Stack Overflow

JQuery - check checkboxes based on select list value

2 Answers 2

8 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related