單擊復選框時更改Div顏色

Question

我試圖通過為onchange分配功能來單擊復選框時更改div顏色。 我在函數中的var div id和var checkbox中都得到了null 。 我想念什么嗎？ 還是有什么方法只能通過使用CSS來做到這一點？

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

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

Answer 1

問題是您需要將String值傳遞給您的check函數。 因此，只需添加如下引號：

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

要么 ：

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

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

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

Answer 2

您缺少單引號：

check('cbinternet','internet')

Answer 3

您在這里犯了錯誤：

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

元素ID必須為字符串。 現在，您正在傳遞空對象。

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

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