Question

我有多个复选框，这些复选框针对不同的屏幕分辨率具有相同的ID。当我单击“检查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事件做出反应，并同时触发另一个复选框。

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

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

Answer 2

您可以使用此javascript代码来完成此操作。

此代码执行以下操作：

将事件侦听器添加到两个复选框的}事件中。
将另一个复选框的选中属性设置为与触发更改事件的复选框的选中属性相同的值。

注意：我更改了复选框的ID以使其唯一。

change

document.getElementById('10A-1').addEventListener('change', function () {
    document.getElementById('10A-2').checked = this.checked;
});

document.getElementById('10A-2').addEventListener('change', function () {
    document.getElementById('10A-1').checked = this.checked;
});

.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%);
}

Answer 3

//准备好文档后运行

var checkbox = $('input[type="checkbox"]');
    $(checkbox).on('click', function(){
    if($(this).is(':checked')){
    $(checkbox).prop('checked', true);
    }
      else{
        $(checkbox).prop('checked', false);

      }
    });

单击其他复选框时突出显示一个复选框

3 个答案: