Question

以下是我的自定义复选框的摘要。我想要的是让它工作（检查，未检查的东西）多次，而不依赖于输入复选框上的id（输入复选框id是标签中for属性的引用）。有没有办法做到这一点？非常感谢任何帮助，建议，建议，线索和想法。谢谢！

PS：请参阅下面的我的代码段，你可以看到只有一个正在运行。

.checkbox{display: table; border: 1px solid red;}
input[type="checkbox"] {
    display:none !important;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-1px 4px 0 0;
    vertical-align:middle;	
    cursor:pointer;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAmCAIAAACphTeFAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAANhJREFUeNpi7Dlmz0AWYGIgF4zqHNU5qnNU50jRqS3qAWezEKmHnYXHX71Fls8AyL76egexOoHawrQmiHGrAPVAtBGlk49dAmgbUNvxJwuOPV6AxbVAlzz+dAFNG1AD0DagnTvudMBtQwkhoLYw7QkeKhWY2oAMTG0IO4G2AeUgQQdUBwlGR4UcIGPVtYJXX+9g+gLhWrgGkEEfLwDt//nnCy5t6CEE1wxEQA0bb9Z8+vkCV8ihhy1EsyiXCtA2oJ14whxLrAA1AwMTvzacqY+gtiGXywACDABDcVluuHVmiAAAAABJRU5ErkJggg==');
background-position: 19px 0px;	
}
input[type="checkbox"]:checked + label span {

background-position: 0px 19px;

}

<table cellpadding="5" cellspacing="5">
<tr>
<td>
<div class="checkbox">
<input type="checkbox" id="c1" name="cc" checked style="display: none;"/>
<label for="c1"><span></span></label>
</div>
</td>
<td>
<div class="checkbox">
<input type="checkbox" id="c1" name="cc" checked style="display: none;"/>
<label for="c1"><span></span></label>
</div>
</td>
</tr>
</table>

Answer 1

您只需设置唯一的 ID ，因为ID必须在DOM中唯一，请确保您的<label for=''>必须具有与其相关输入相同的ID。

＆＃13;

.checkbox{display: table; border: 1px solid red;}
input[type="checkbox"] {
    display:none !important;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-1px 4px 0 0;
    vertical-align:middle;	
    cursor:pointer;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAmCAIAAACphTeFAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAANhJREFUeNpi7Dlmz0AWYGIgF4zqHNU5qnNU50jRqS3qAWezEKmHnYXHX71Fls8AyL76egexOoHawrQmiHGrAPVAtBGlk49dAmgbUNvxJwuOPV6AxbVAlzz+dAFNG1AD0DagnTvudMBtQwkhoLYw7QkeKhWY2oAMTG0IO4G2AeUgQQdUBwlGR4UcIGPVtYJXX+9g+gLhWrgGkEEfLwDt//nnCy5t6CEE1wxEQA0bb9Z8+vkCV8ihhy1EsyiXCtA2oJ14whxLrAA1AwMTvzacqY+gtiGXywACDABDcVluuHVmiAAAAABJRU5ErkJggg==');
background-position: 19px 0px;	
}
input[type="checkbox"]:checked + label span {

background-position: 0px 19px;

}

＆＃13;

<table cellpadding="5" cellspacing="5">
<tr>
<td>
<div class="checkbox">
<input type="checkbox" id="c1" name="cc" checked style="display: none;"/>
<label for="c1"><span></span></label>
</div>
</td>
<td>
<div class="checkbox">
<input type="checkbox" id="c2" name="cc" checked style="display: none;"/>
<label for="c2"><span></span></label>
</div>
</td>
</tr>
</table>

＆＃13;

自定义复选框不适用于多个复选框

1 个答案: