Eu particularmente adoro o Vue.js
.
Com ele é possível deixar a dinâmica de renderização de html em tempo real. Esse exemplo automatiza o processo de exibição do conteúdo.
Agora você só precisa receber esses dados de uma API sem ter que se preocupar em alterar o documento html toda vez que seu banco de dados ou API adicionar um novo produto.
var app = new Vue({
el: '#check',
data: {
checks: [
{label: 'APPLE' , values: ['IPHONE' , 'IPAD'] , check:false},
{label: 'LG' , values: ['TVs' , 'SMARTPHONES'] , check:false}
]
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="check">
<div v-for="check in checks" >
<label >{{check.label}}</label>
<input type="checkbox" v-on:click="check.check = check.check == false ? true : false">
<select v-if="check.check">
<option v-for="value in check.values " v-bind:value="value" >{{value}}
</select>
</div>
</div>