单击复选框时更改Div颜色

Question

我正在尝试通过为div分配功能来单击复选框时更改onchange颜色。我在函数中获得null id和var div的{​​{1}}。我错过了什么吗？或者有没有办法只使用CSS做到这一点？

var checkbox

function check(cbid,id) {
	var div = document.getElementById(id);
	var checkbox = document.getElementById(cbid);
	console.log(div);
	console.log(checkbox);
	if(checkbox.checked == true) {
		div.style.backgroundColor = "red";
	} else {
		div.style.backgroundColor = "black";
	}
}

.excluded-prices {
	min-height: 55px;
	padding: 13px 0 0 0;
	border-top: 1px solid #eaeaea;
	float: left;
	width: 100%;
	position: relative;
	clear: left;
	margin: 10px 0 0 0;
	background: #f5fbf5;
	border-radius: 3px;
}

.excluded-prices:hover {
	background-color: white;
}

.excluded-prices .ep-checkbox {
	padding: 0 13px 0 0;
	margin-left: 10px;
	float: left;
}

.ep-checkbox .epc {
	padding: 0;
	margin: 0;
	border: 0;
}

excluded-prices .ep-name {
	width: 240px;
	float: left;
}

.epn-title {
	padding: 0;
	margin: 0;
	display: block;
	cursor: pointer;
	font-weight: bold;
	font-size: 13px;
	color: #003580;	
}

.epn-description {
	margin-left: 35px;
	padding: 8px 0 13px 0;
	display: block;
	font-size: .923em;
	font-weight: normal;
	color: #537bb4;
	cursor: pointer;
}

.ep-price {
	display: none;
	float: right;
	margin-top: -45px;
	padding-bottom: 15px;
}

.epp-total {
	width: 90px;
	float: right;
	margin-right: 5px;
}

.total-title {
	text-align: center;
	padding: 0 0 3px 0;
	margin: 0;
}

.eppt-price {
	color: #0898ff;
	text-align: center;
	padding: 0 0 3px 0;
	margin-top: 0;
}

Answer 1

问题是您需要将String值传递给check函数。所以只需添加这样的引号：

onchange="check('cbinternet','internet')"

或者：

onchange="check(this.id, 'internet')"

＆＃13;

＆＃13;

function check(cbid,id) {
	var div = document.getElementById(id);
	var checkbox = document.getElementById(cbid);
	console.log(div);
	console.log(checkbox);
	if(checkbox.checked == true) {
		div.style.backgroundColor = "red";
	} else {
		div.style.backgroundColor = "black";
	}
}

＆＃13;

.excluded-prices {
	min-height: 55px;
	padding: 13px 0 0 0;
	border-top: 1px solid #eaeaea;
	float: left;
	width: 100%;
	position: relative;
	clear: left;
	margin: 10px 0 0 0;
	background: #f5fbf5;
	border-radius: 3px;
}

.excluded-prices:hover {
	background-color: white;
}

.excluded-prices .ep-checkbox {
	padding: 0 13px 0 0;
	margin-left: 10px;
	float: left;
}

.ep-checkbox .epc {
	padding: 0;
	margin: 0;
	border: 0;
}

excluded-prices .ep-name {
	width: 240px;
	float: left;
}

.epn-title {
	padding: 0;
	margin: 0;
	display: block;
	cursor: pointer;
	font-weight: bold;
	font-size: 13px;
	color: #003580;	
}

.epn-description {
	margin-left: 35px;
	padding: 8px 0 13px 0;
	display: block;
	font-size: .923em;
	font-weight: normal;
	color: #537bb4;
	cursor: pointer;
}

.ep-price {
	display: none;
	float: right;
	margin-top: -45px;
	padding-bottom: 15px;
}

.epp-total {
	width: 90px;
	float: right;
	margin-right: 5px;
}

.total-title {
	text-align: center;
	padding: 0 0 3px 0;
	margin: 0;
}

.eppt-price {
	color: #0898ff;
	text-align: center;
	padding: 0 0 3px 0;
	margin-top: 0;
}

＆＃13;

<div class="excluded-prices" id="internet">
        <div class="ep-checkbox">
            <input type="checkbox" id="cbinternet" onchange="check(this.id, 'internet')" class="epc">
        </div>
        <div class="ep-name">
            <label class="epn-title">Internet(Cable)</label>
            <label class="epn-description">Internet is available for the entire property and costs &euro; 14 per
                day.</label>
        </div>
        <div class="ep-price">
            <input type="hidden" id="ep_price">
            <div class="epp-total">
                <p class="total-title">Total</p>
                <p class="eppt-price">BAM 28</p>
            </div>
        </div>
    </div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

你缺少单引号：

check('cbinternet','internet')

Answer 3

你在这里弄错了：

onchange="check('cbinternet','internet')"

元素id必须是字符串。现在你传递的是null对象。

＆＃13;

＆＃13;

function check(cbid,id) {
	var div = document.getElementById(id);
	var checkbox = document.getElementById(cbid);
	console.log(div);
	console.log(checkbox);
	if(checkbox.checked == true) {
		div.style.backgroundColor = "red";
	} else {
		div.style.backgroundColor = "black";
	}
}

＆＃13;

.excluded-prices {
	min-height: 55px;
	padding: 13px 0 0 0;
	border-top: 1px solid #eaeaea;
	float: left;
	width: 100%;
	position: relative;
	clear: left;
	margin: 10px 0 0 0;
	background: #f5fbf5;
	border-radius: 3px;
}

.excluded-prices:hover {
	background-color: white;
}

.excluded-prices .ep-checkbox {
	padding: 0 13px 0 0;
	margin-left: 10px;
	float: left;
}

.ep-checkbox .epc {
	padding: 0;
	margin: 0;
	border: 0;
}

excluded-prices .ep-name {
	width: 240px;
	float: left;
}

.epn-title {
	padding: 0;
	margin: 0;
	display: block;
	cursor: pointer;
	font-weight: bold;
	font-size: 13px;
	color: #003580;	
}

.epn-description {
	margin-left: 35px;
	padding: 8px 0 13px 0;
	display: block;
	font-size: .923em;
	font-weight: normal;
	color: #537bb4;
	cursor: pointer;
}

.ep-price {
	display: none;
	float: right;
	margin-top: -45px;
	padding-bottom: 15px;
}

.epp-total {
	width: 90px;
	float: right;
	margin-right: 5px;
}

.total-title {
	text-align: center;
	padding: 0 0 3px 0;
	margin: 0;
}

.eppt-price {
	color: #0898ff;
	text-align: center;
	padding: 0 0 3px 0;
	margin-top: 0;
}

＆＃13;

<div class="excluded-prices" id="internet">
        <div class="ep-checkbox">
            <input type="checkbox" id="cbinternet" onchange="check('cbinternet','internet')" class="epc">
        </div>
        <div class="ep-name">
            <label class="epn-title">Internet(Cable)</label>
            <label class="epn-description">Internet is available for the entire property and costs &euro; 14 per
                day.</label>
        </div>
        <div class="ep-price">
            <input type="hidden" id="ep_price">
            <div class="epp-total">
                <p class="total-title">Total</p>
                <p class="eppt-price">BAM 28</p>
            </div>
        </div>
    </div>

＆＃13;

＆＃13;

＆＃13;