当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - changing checkbox style on uncheck

问题描述:

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?

网友答案:

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.

网友答案:

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
网友答案:

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

分享给朋友:
您可能感兴趣的文章:
随机阅读: