我有多个复选框,它们对于不同的屏幕分辨率具有相同的 ID。当我单击 Check 1 标签时,复选标记会突出显示。在提供的示例中,检查 1 和检查 2 具有相同的 ID,当我点击检查 1 时,我希望检查 2 的检查标记也被突出显示,反之亦然。
.checkmark {
display: inline-block;
width: 22px;
/*height: 22px;*/
height: 17px;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
margin-left: 50%;
margin-bottom: 1px;
}
.checkmark::before {
content: '';
position: absolute;
width: 3px;
height: 9px;
background-color: #ccc;
left: 11px;
top: 6px;
}
.checkmark {
cursor: pointer;
}
.checkmark::after {
content: '';
position: absolute;
width: 3px;
height: 3px;
background-color: #ccc;
left: 8px;
top: 12px;
}
input[type="checkbox"]:checked+.checkmark:before,
input[type="checkbox"]:checked+.checkmark:after {
background: linear-gradient(rgb(42, 104, 149) 0px, rgb(44, 109, 157) 100%);
}
<div class="menu-lg">
<label style="display: inline;color: #545454;font-weight:100;" dataid="' +this.ID +'">
<input type= "checkbox" style= "display:none;" id="10A">Check1
<span for="10A" class="checkmark"></span >
</label >
</div>
<div class="menu-sm">
<label style="display: inline;color: #545454;font-weight:100;" dataid="' +this.ID +'" >
<input type= "checkbox" style= "display:none;" id="10A">Check2
<span for="10A" class="checkmark"></span >
</label >
</div>
如何突出显示同一 IDS 的所有复选标记?
最佳答案
在您的情况下,突出显示基于 :checked
选择器 -> 如果复选框被选中,则突出显示其后面的 span
。
在您的情况下,您将需要 javascript 对复选框上的 onchange
/click
事件使用react,并同时触发另一个复选框。
如何使用它的基本设置,您需要根据需要更改它:
// use click or onchange
document.getElementById('checkbox1').addEventListener('click', function () {
document.getElementById('checkbox2').click();
});
关于javascript - 单击另一个复选框时突出显示一个复选框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51843540/