javascript - changing checkbox style on uncheck - Stack Overflow

admin管理员组

文章数量:1290059

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?

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?

• javascript
• html
• css
• checkbox

Share Improve this question Follow edited Aug 22, 2015 at 2:49 user1578872 asked Aug 22, 2015 at 2:26 user1578872user1578872 9,1083636 gold badges129129 silver badges232232 bronze badges 4

• Could you paste all the codes?It will help others to find the problem. – rubyu2 Commented Aug 22, 2015 at 2:28
• Form elements styling is not so easy, and you need bag of tricks: inserthtml./2012/06/custom-form-radio-checkbox – sinisake Commented Aug 22, 2015 at 2:29
• What is a parent checkbox? – Lajos Arpad Commented Aug 22, 2015 at 3:28
• Its a kind of tree structure. – user1578872 Commented Aug 22, 2015 at 12:02

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

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>

http://jsfiddle/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.

you can use CSS psuedo elements.

The :checked pseudo-class in CSS selects elements when they are in the selected state. It is only associated with input () elements of type radio and checkbox . The :checked pseudo-class selector matches radio and checkbox input types when checked or toggled to an on state. If they are not selected or checked, there is no match.

So when a checkbox is checked, and you are targeting the label immediately after it:

CSS:

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

The label text will turn from grey italic to red normal font.

HTML:

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

Taken from CSS-Tricks

Hope this helps

本文标签： javascriptchanging checkbox style on uncheckStack Overflow