пользовательский флажок не работает над несколькими флажками.

Question

Ниже приведен фрагмент моего пользовательского флажка. Я хочу, чтобы он работал (проверено, непроверенным) несколько раз, не полагаясь на флажок id на входе (входной флажок id является ссылкой для атрибута в метке). Есть ли способы сделать это? любая помощь, предложения, рекомендации, подсказки и идеи очень приветствуются. Спасибо!

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; \t 
 
    cursor:pointer; 
 
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAmCAIAAACphTeFAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAANhJREFUeNpi7Dlmz0AWYGIgF4zqHNU5qnNU50jRqS3qAWezEKmHnYXHX71Fls8AyL76egexOoHawrQmiHGrAPVAtBGlk49dAmgbUNvxJwuOPV6AxbVAlzz+dAFNG1AD0DagnTvudMBtQwkhoLYw7QkeKhWY2oAMTG0IO4G2AeUgQQdUBwlGR4UcIGPVtYJXX+9g+gLhWrgGkEEfLwDt//nnCy5t6CEE1wxEQA0bb9Z8+vkCV8ihhy1EsyiXCtA2oJ14whxLrAA1AwMTvzacqY+gtiGXywACDABDcVluuHVmiAAAAABJRU5ErkJggg=='); 
 
background-position: 19px 0px; \t 
 
} 
 
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

Вам просто нужно установить уникальный идентификаторов Как Идентификаторы должны быть уникальными в DOM, убедитесь, что <label for=''> должны быть с таким же идентификатором, как это соответствующий вклад.

.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; \t 
 
    cursor:pointer; 
 
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAmCAIAAACphTeFAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAANhJREFUeNpi7Dlmz0AWYGIgF4zqHNU5qnNU50jRqS3qAWezEKmHnYXHX71Fls8AyL76egexOoHawrQmiHGrAPVAtBGlk49dAmgbUNvxJwuOPV6AxbVAlzz+dAFNG1AD0DagnTvudMBtQwkhoLYw7QkeKhWY2oAMTG0IO4G2AeUgQQdUBwlGR4UcIGPVtYJXX+9g+gLhWrgGkEEfLwDt//nnCy5t6CEE1wxEQA0bb9Z8+vkCV8ihhy1EsyiXCtA2oJ14whxLrAA1AwMTvzacqY+gtiGXywACDABDcVluuHVmiAAAAABJRU5ErkJggg=='); 
 
background-position: 19px 0px; \t 
 
} 
 
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="c2" name="cc" checked style="display: none;"/> 
 
<label for="c2"><span></span></label> 
 
</div> 
 
</td> 
 
</tr> 
 
</table>