更改未选中时的复选框样式

Question

我是一个有用的助手，可以帮助您翻译文本。

我在页面上有一个复选框列表，默认情况下所有框都被选中。当用户单击任何特定复选框以取消选择时，复选框的背景颜色应更改或复选框应以红色交叉标记为已选中。

我尝试了以下内容：

（请注意：此处无需翻译和修改）

document.getElementById("checkBooxId1").style = "background-color:red";

这不起作用。

而且，我希望只在某些情况下执行此操作，而不是每次都执行。因此，当选中父复选框但未选中子复选框时，未选中的复选框样式应该不同。如果父复选框也未被选中，则子复选框和父复选框应该处于正常样式。

还有其他方法吗？

- user1578872

---

你能把所有的代码粘贴上来吗？这样可以帮助其他人找到问题。 - rubyu2

表单元素的样式设计并不容易，需要一些技巧：http://www.inserthtml.com/2012/06/custom-form-radio-checkbox/ - sinisake

父复选框是什么？ - Lajos Arpad

这是一种树形结构。 - user1578872

Answer 1

正如我之前所说，您不能更改复选框的背景颜色，但有一些变通方法可以达到所需效果。

Using JavaScript:

var defaultState = "checked";
var fakecboxes  = document.getElementsByClassName("fakecbox");
for (var i = 0; i < fakecboxes.length; i++) {
 (function (i) {
  if (!fakecboxes[i].classList.contains(defaultState)) {
   fakecboxes[i].classList.add(defaultState);
  }
  fakecboxes[i].onclick = function () {
   if (!this.classList.contains("checked")) {
    this.classList.add("checked");
    this.classList.remove("unchecked");
   } else {
    this.classList.remove("checked");
    this.classList.add("unchecked");
   }
  };
 })(i);
}

body {
 user-select: none;
 -webkit-user-select: none;
}
.fakecbox {
 width: 12px;
 height: 12px;
 box-sizing: border-box;
 margin: 3px;
 margin-left: 4px;
 display: inline-block;
 position: relative;
 box-shadow: 0 1px 0 rgba(0, 0, 0, .1);
 background-color: rgb(222, 222, 222);
 background: linear-gradient(to bottom, rgb(243, 243, 243) 0%, rgb(224, 224, 224) 40%, rgb(224, 224, 224) 100%);
 border-radius: 2px;
 border-width: 1px;
 border-style: solid;
 border-top-color: rgb(178, 178, 178);
 border-left-color: rgb(167, 167, 167);
 border-right-color: rgb(167, 167, 167);
 border-bottom-color: rgb(167, 167, 167);
}
.fakecbox:hover {
 border-top-color: rgb(168, 168, 168);
 border-left-color: rgb(157, 157, 157);
 border-right-color: rgb(157, 157, 157);
 border-bottom-color: rgb(157, 157, 157);
 box-shadow: 0 1px 0 rgba(0, 0, 0, .125);
 background: linear-gradient(to bottom, rgb(244, 244, 244) 0%, rgb(226, 226, 226) 40%, rgb(226, 226, 226) 100%);
}
.fakecbox:active {
 border-top-color: rgb(173, 173, 173);
 border-left-color: rgb(161, 161, 161);
 border-right-color: rgb(161, 161, 161);
 border-bottom-color: rgb(161, 161, 161);
 background: linear-gradient(to bottom, rgb(231, 231, 231) 0%, rgb(213, 213, 213) 40%, rgb(213, 213, 213) 100%);
 box-shadow: none;
}
.fakecbox.checked::after {
 content:"";
 position: absolute;
 top: 0;
 left: 0;
 height: 100%;
 width: 100%;
 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAMAAADz0U65AAAAM1BMVEX///9CQkJERERMTExPT09WVlZZWVlfX19gYGBlZWVmZmZpaWlra2txcXFycnJzc3N6enq1N2u5AAAAAXRSTlMAQObYZgAAAC5JREFUeAElwYcRACEMwDD7eyHA/tNyuUiUj3JtB+nXBp2pAx5PvYFQd9KrlCAtF1AAoT8ZlaoAAAAASUVORK5CYII=);
 background-repeat: no-repeat;
 background-position: center;
}
.fakecbox.red {
 background: rgba(255,0,0,.4);
 border: 1px solid rgba(200,0,0,.5);
}
.fakecbox.redonuncheck.unchecked {
 background: rgba(255,0,0,.4);
 border: 1px solid rgba(200,0,0,.5);
}

<input type="checkbox" />Normal checkbox
<br>
<div class="fakecbox"></div>Fake checkbox
<br>
<div class="fakecbox red"></div>Fake red checkbox
<br>
<div class="fakecbox redonuncheck"></div>Fake red-on-uncheck checkbox

---

This one using only CSS. You can remove the last label <label for="cbox">Normal checkbox</label>. Checkbox still works. You can modify the span for unchecked state and input:checked + span for checked state.

.checkbox input {
 display: none;
}
.checkbox span {
 width: 20px;
 height: 20px;
 display: inline-block;
 background-color: red;
}
.checkbox input:checked + span {
 background-color: lime;
}

<label class="checkbox">
    <input type="checkbox" name="checkbox"/>
    <span></span>
</label>
<label for="checkbox">Normal(modified) checkbox</label>

- akinuri

Answer 2

http://jsfiddle.net/2ck4tfj3/1/

input[type=checkbox] {
    position: relative;
}
input[type=checkbox].awesome::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: red;
}

使用以下代码可以动态将背景色更改为红色：document.getElementById("checkbox1").className = "awesome";

我使用CSS伪元素来为具有awesome类的输入复选框设置样式。您可以通过JavaScript更改元素是否具有此类。

- DivideByZero

---

是的，我可以使用这个ID取消或选中。 - user1578872

尽管代码是正确的，但您无法更改复选框的背景颜色。 - akinuri

有没有其他方法在取消选中事件上进行一些样式设置？ - user1578872

你可以使用CSS伪元素，如::after或::before，并对其进行样式设置。或者，你可以在复选框后面放置一个<div>并对其进行样式设置。 - DivideByZero

我只想在复选框未被选中时执行此操作，并且在再次选中后应恢复为正常样式。 - user1578872

Answer 3

您可以使用CSS伪元素。

CSS中的:checked伪类在选定状态下选择元素。它仅与单选框和复选框类型的输入()元素相关联。:checked伪类选择器在选中或切换到开启状态时匹配单选按钮和复选框输入类型。如果它们未被选中或选中，则没有匹配项。

因此，当复选框被选中，并且您正在定位其后紧接着的标签时：

CSS：

input[type=checkbox] + label {
color: #ccc;
font-style: italic;
} 
input[type=checkbox]:checked + label {
color: #f00;
font-style: normal;
} 

标签文字将从灰色斜体变为红色普通字体。

HTML：

<input type="checkbox" id="ossm" name="ossm"> 
<label for="ossm">CSS is Awesome</label> 

来源于 CSS-Tricks

希望这有所帮助

- Gabriel Chan