css - 重寫checkbox樣式 用到id 與label關聯實現 但是現在checkbox循環生成多項 就不能用id了 求解決辦法
問題描述
<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>
現在頁面中有多個checkbox循環生成 就不能用id于label產生關聯了 請問怎么解決
問題解答
回答1:可以用 js 生成動態 id 吧。在循環中給每個 input 生成 id = 'awesome'+i,同時把 label 的 for 屬性值也設置成一樣的。下面是簡單的示例:
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='點擊'; body.appendChild(label) body.appendChild(input)}回答2:
<label class='label-checkbox'><input type='radio' name='my-radio' checked='checked'></label>
這么寫不就好了 多簡單
相關文章:
1. android - NavigationView 的側滑菜單中如何保存新增項(通過程序添加)2. python - Pycharm一句代碼寫完可以自動補全空格么?3. 提示語法錯誤語法錯誤: unexpected ’abstract’ (T_ABSTRACT)4. python - xpath提取網頁路徑沒問題,但是缺失內容?5. mysql服務無法啟動1067錯誤,誰知道正確的解決方法?6. tp5 不同控制器中的變量調用問題7. 除了 python2 和 python3,ipython notebook 還可以用哪些內核?8. php7.3.4中怎么開啟pdo驅動9. 這段代碼既不提示錯誤也看不到結果,請老師明示錯在哪里,謝謝!10. 老師 我是一個沒有學過php語言的準畢業生 我希望您能幫我一下
