Checking specific checkboxes based on select option using Jquery

Question

I am trying to check checkboxes based on a select option. So, if the user chooses one option 3 from the dropdown, I want it to automatically check checkboxes with the ids set as 4, 24, and 17.

I have predefined the variables using PHP, so that my array is as follows:

var per =[]; 

per['3'] = []; 
per['3']['4'] = '4'; 
per['3']['24'] = '24'; 
per['3']['17'] = '17'; 

per['4'] = []; 
per['4']['null'] = 'null'; 

per['6'] = []; 
per['6']['19'] = '19';

The array is setup so that per[‘VALUE’] is the option for the select. (The user selects 3 and tickboxes 4, 24, & 17 are checked).

I have managed to use an alert to test that I can pull out the right data. I think it may be something in my reference to the checkbox that is killing me.

My jquery code:

    $("#get_boxes").change(function () {
    var per =[]; 

per['3'] = []; 
per['3']['4'] = '4'; 
per['3']['24'] = '24'; 
per['3']['17'] = '17'; 

per['4'] = []; 
per['4']['null'] = 'null'; 

per['6'] = []; 
per['6']['19'] = '19';

    var role = $(this).val();
        $.each(per[role], function(k, v){
            if(v != undefined) { 
            $('#'+v).attr('checked', true);
            }
        });
    });

The html:

<select name="role" id="get_boxes" class="full-width">
    <option value="null">---</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="6">Six</option>
</select>
<p class="halflist">
        <input type="checkbox" name="permission[1]" id="1" />
        <label for="1" class="inline">Tick One</label>
</p><p class="halflist">
        <input type="checkbox" name="permission[4]" id="4" />
        <label for="4" class="inline">Tick Four</label>
</p><p class="halflist">
        <input type="checkbox" name="permission[5]" id="5" />
        <label for="5" class="inline">Tick Five</label>
</p><p class="halflist">
        <input type="checkbox" name="permission[6]" id="6" />
        <label for="6" class="inline">Tick Six</label>
</p><p class="halflist">
        <input type="checkbox" name="permission[2]" id="2" />
        <label for="2" class="inline">Tick Two</label>
</p>

Thanks in advance!

Answer 1

You might be better off adding classes to the dependent checkboxes. For example, if a person checks checkbox A and then checkboxes B, C, and D are supposed to be automatically checked, you can add a class of check_A to checkboxes B, C, and D. Then you just need to do a jQuery select on .check_A.

HTML...

<input type="checkbox" id="A" />
<input type="checkbox" id="B" class="check_A" />
<input type="checkbox" id="C" class="check_A" />
<input type="checkbox" id="D" class="check_A" />
<input type="checkbox" id="E" />
<input type="checkbox" id="F" class="check_E" />
<input type="checkbox" id="G" class="check_E" />
<input type="checkbox" id="H" class="check_E" />

Javascript...

$('#A').change(function() {
    $('.check_A').attr('checked', 'checked');
}

Answer 2

In your example you want something like this

var ar = ['Odd','Even'];
ar['Odd'] = [1,3,5,7,9];
ar['Even'] = [0,2,4,6,8];
$('select').change(function() {
    var t = $(this).val();
    $.each(ar[t], function(key,value) {
        $('#'+value).attr('checked',true);
    });
});​

Obviously this is a different context, but you can easily replace the values for what you want to replace.

Here's a live example:

http://jsfiddle.net/sUHNp/