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를 생성할 수 있습니다. 루프의 각 입력에 대해 id = "awesome" i를 생성하고 레이블의 for 속성 값을 동일한 값으로 설정합니다.
다음은 간단한 예입니다.

으아악

Answer 2

으아악

이렇게 쓰는 게 낫지 않을까요? 너무 간단해요