利用js对多选框样式调整

要对多选框的样式进行调整，可以使用CSS和JavaScript来实现。以下是一种基本的实现方法：

1. 首先，可以在CSS中定义一个自定义的多选框样式，例如：

.custom-checkbox {
  display: inline-block;
  position: relative;
  padding-left: 25px;
  margin-right: 10px;
  font-size: 16px;
  line-height: 20px;
  cursor: pointer;
}

.custom-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #eee;
  border-radius: 3px;
}

.custom-checkbox:hover input ~ .checkmark {
  background-color: #ccc;
}

.custom-checkbox input:checked ~ .checkmark {
  background-color: #2196F3;
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.custom-checkbox input:checked ~ .checkmark:after {
  display: block;
}

.custom-checkbox .checkmark:after {
  left: 7px;
  top: 3px;
  width: 6px;
  height: 12px;
  border: solid white;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

2. 在HTML中使用自定义样式，例如：

<label class="custom-checkbox">Checkbox 1
  <input type="checkbox" checked="checked">
  <span class="checkmark"></span>
</label>

<label class="custom-checkbox">Checkbox 2
  <input type="checkbox">
  <span class="checkmark"></span>
</label>

<label class="custom-checkbox">Checkbox 3
  <input type="checkbox">
  <span class="checkmark"></span>
</label>

3. 如果想要在JavaScript中实现更复杂的交互效果，可以使用事件监听器来捕获多选框的状态变化，例如：

var checkboxes = document.querySelectorAll('.custom-checkbox input[type="checkbox"]');

for (var i = 0; i < checkboxes.length; i++) {
  checkboxes[i].addEventListener('change', function() {
    if (this.checked) {
      this.parentNode.classList.add('checked');
    } else {
      this.parentNode.classList.remove('checked');
    }
  });
}

这段代码会遍历所有的自定义多选框，并为它们添加一个监听器，当状态变化时，会在父元素上添加或移除一个名为“checked”的类，以实现更灵活的样式调整。