changing checkbox style on uncheck

Question

I have a list of checkboxes in a page with all the boxes are checked by default. When user clicks on any particular checkbox to uncheck it, the background color of the checkbox should be changed or the boxes should be checked with cross mark in a red color.

I tried the following on uncheck,

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

This is not working.

Also, I would like to do this on some occasion not all the time. So, when the parent checkbox is checked and the child is unchecked, the style of the unchecked checkebox should be different. Whereas, if the parent is also not checked, then the child and the parent should be in normal style.

Is there any other way?

Answer 1

As I said before, you can't change the background-color of a checkbox, but there are workarounds to get the desired effect.

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>

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;
}

and just use this to change the background to red dynamically: document.getElementById("checkbox1").className = "awesome";

I used CSS pseudo elements to style the input checkboxes when they have the class awesome. You can change whether an element has this class with JavaScript.