Reputation: 3193
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!
Upvotes: 1
Views: 2762
Reputation: 21388
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.
Upvotes: 0
Reputation: 38035
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');
}
Upvotes: 1