javascript - 单击另一个复选框时突出显示一个复选框

Question

我有多个复选框，它们对于不同的屏幕分辨率具有相同的 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 的所有复选标记？

Answer 1

在您的情况下，突出显示基于 :checked 选择器 -> 如果复选框被选中，则突出显示其后面的 span。

在您的情况下，您将需要 javascript 对复选框上的 onchange/click 事件使用react，并同时触发另一个复选框。

如何使用它的基本设置，您需要根据需要更改它:

// use click or onchange
document.getElementById('checkbox1').addEventListener('click', function () {
    document.getElementById('checkbox2').click();
});