css - 重写checkbox样式 用到id 与label关联实现 但是现在checkbox循环生成多项 就不能用id了 求解决办法

Question

<p class="checkbox">
        <input id="awesome" 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产生关联了
请问怎么解决

Answer 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)
        }

Answer 2

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

這麼寫不就好了 多簡單