問(wèn)題描述

<p class='checkbox'><input type='checkbox'><label for='awesome'></label> </p> <style>.checkbox input[type='checkbox']+label::before { content: ’a0’; display: inline-block; margin-right: 0em; border-radius: 1em; width: 1.3em; height: 1.3em; line-height: 1.1em; background: silver; text-indent: .2em; vertical-align: 0.2em; font-size: 20px;}.checkbox input[type='checkbox']:checked+label::before { background: yellowgreen; content: ’2605’;}input[type='checkbox'] { position: absolute; display: none;} </style>

現(xiàn)在頁(yè)面中有多個(gè)checkbox循環(huán)生成 就不能用id于label產(chǎn)生關(guān)聯(lián)了 請(qǐng)問(wèn)怎么解決

問(wèn)題解答

可以用 js 生成動(dòng)態(tài) id 吧。在循環(huán)中給每個(gè) input 生成 id = 'awesome'+i，同時(shí)把 label 的 for 屬性值也設(shè)置成一樣的。下面是簡(jiǎn)單的示例：

var body=document.getElementsByTagName(’body’)[0];for(var i=0;i<3;i++){ var input=document.createElement('input'); input.id='input'+i; var label=document.createElement('label'); label.setAttribute('for','input'+i); label.innerHTML='點(diǎn)擊'; body.appendChild(label) body.appendChild(input)}回答2：

<label class='label-checkbox'><input type='radio' name='my-radio' checked='checked'></label>

這么寫(xiě)不就好了 多簡(jiǎn)單