利用js调整多选框样式

可以通过以下步骤利用 JavaScript 调整多选框的样式：

1. 首先，获取多选框元素的引用。可以使用 `document.getElementById()` 或 `document.querySelector()` 方法获取此元素的引用。

2. 然后，为多选框添加一个事件监听器，当它被选中或取消选中时触发此监听器。

3. 在事件监听器中，使用 JavaScript 修改多选框的样式。例如，可以通过修改多选框的背景颜色或边框样式来修改其外观。

以下是一个示例代码，可以用来实现这一功能：

HTML 代码：

<input type="checkbox" id="checkbox1" value="1">
<label for="checkbox1">选项 1</label>

<input type="checkbox" id="checkbox2" value="2">
<label for="checkbox2">选项 2</label>

JavaScript 代码：

// 获取多选框元素的引用
const checkbox1 = document.getElementById("checkbox1");
const checkbox2 = document.getElementById("checkbox2");

// 为多选框添加事件监听器
checkbox1.addEventListener("change", function() {
  // 根据多选框的选中状态修改样式
  if (checkbox1.checked) {
    checkbox1.style.backgroundColor = "green";
    checkbox1.style.border = "2px solid green";
  } else {
    checkbox1.style.backgroundColor = "";
    checkbox1.style.border = "";
  }
});

checkbox2.addEventListener("change", function() {
  // 根据多选框的选中状态修改样式
  if (checkbox2.checked) {
    checkbox2.style.backgroundColor = "green";
    checkbox2.style.border = "2px solid green";
  } else {
    checkbox2.style.backgroundColor = "";
    checkbox2.style.border = "";
  }
});

这样，当用户选中或取消选中多选框时，它的样式会相应地改变。