I am looking to populate attributes for 4 checkboxes and their labels from specific arrays without appending the entire markup. I have everything set up in the markup and just need to fill in the attributes based on the selection from a select menu.
var _select = $('#opt');
var _container = $('#teams');
var FF1 = [{
display: "Week 1",
value: "Week-1"
},
{
display: "Week 2",
value: "Week-2"
},
{
display: "Week 3",
value: "Week-3"
},
{
display: "Week 4",
value: "Week-4"
}
];
var FF2 = [{
display: "Week 5",
value: "Week-5"
},
{
display: "Week 6",
value: "Week-6"
},
{
display: "Week 7",
value: "Week-7"
},
{
display: "Week 8",
value: "Week-8"
}
];
_select.on('change', function() {
var parent = $(this).val();
_container.removeClass('is-hidden');
switch (parent) {
case 'FF1':
weekList(FF1);
break;
case 'FF2':
weekList(FF2);
break;
default:
break;
}
});
function weekList(array_list) {
$(array_list).each(function(i) {
console.log(array_list[i]);
});
}.is-hidden {
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="opt">
<option value="">Select Option</option>
<option value="FF1">FF1</option>
<option value="FF2">FF2</option>
</select>
<div id="teams" class="is-hidden">
<div class="checkbox">
<input type="checkbox" name="teams" class="ck1" id="" />
<label for="" class="lb1"></label>
</div>
<div class="checkbox">
<input type="checkbox" name="teams" class="ck2" id="" />
<label for="" class="lb2"></label>
</div>
<div class="checkbox">
<input type="checkbox" name="teams" class="ck3" id="" />
<label for="" class="lb3"></label>
</div>
<div class="checkbox">
<input type="checkbox" name="teams" class="ck4" id="" />
<label for="" class="lb4"></label>
</div>
</div>Would appreciate any assistance with this!
Many thanks in advance!
Cheers!