2017-02-09 73 views
0

我试图通过为onchange分配函数单击复选框来更改div的颜色。我在var div id和var checkbox函数中获得null。我错过了什么吗?或者有没有什么办法可以做到这一点,只有通过使用CSS?单击复选框时更改Div Color

function check(cbid,id) { 
 
\t var div = document.getElementById(id); 
 
\t var checkbox = document.getElementById(cbid); 
 
\t console.log(div); 
 
\t console.log(checkbox); 
 
\t if(checkbox.checked == true) { 
 
\t \t div.style.backgroundColor = "red"; 
 
\t } else { 
 
\t \t div.style.backgroundColor = "black"; 
 
\t } 
 
}
.excluded-prices { 
 
\t min-height: 55px; 
 
\t padding: 13px 0 0 0; 
 
\t border-top: 1px solid #eaeaea; 
 
\t float: left; 
 
\t width: 100%; 
 
\t position: relative; 
 
\t clear: left; 
 
\t margin: 10px 0 0 0; 
 
\t background: #f5fbf5; 
 
\t border-radius: 3px; 
 
} 
 

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

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

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

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

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

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

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

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

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

 
.eppt-price { 
 
\t color: #0898ff; 
 
\t text-align: center; 
 
\t padding: 0 0 3px 0; 
 
\t 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>

+0

改变你对改变成平变化=“检查( 'cbinternet', '互联网') – bxorcloud

+0

谢谢@bxorcloud! –

回答

0

你缺少的单引号:

check('cbinternet','internet') 
+0

我不能相信我是多么怀念这个..谢谢你的帮助! –

2

的问题是,你需要为字符串值传递给你的check功能。所以只加引号这样的:

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

或者:

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

function check(cbid,id) { 
 
\t var div = document.getElementById(id); 
 
\t var checkbox = document.getElementById(cbid); 
 
\t console.log(div); 
 
\t console.log(checkbox); 
 
\t if(checkbox.checked == true) { 
 
\t \t div.style.backgroundColor = "red"; 
 
\t } else { 
 
\t \t div.style.backgroundColor = "black"; 
 
\t } 
 
}
.excluded-prices { 
 
\t min-height: 55px; 
 
\t padding: 13px 0 0 0; 
 
\t border-top: 1px solid #eaeaea; 
 
\t float: left; 
 
\t width: 100%; 
 
\t position: relative; 
 
\t clear: left; 
 
\t margin: 10px 0 0 0; 
 
\t background: #f5fbf5; 
 
\t border-radius: 3px; 
 
} 
 

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

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

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

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

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

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

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

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

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

 
.eppt-price { 
 
\t color: #0898ff; 
 
\t text-align: center; 
 
\t padding: 0 0 3px 0; 
 
\t 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>

+0

我怎么会想念它...非常感谢你 –

0

您在这里犯的错误:

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

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

function check(cbid,id) { 
 
\t var div = document.getElementById(id); 
 
\t var checkbox = document.getElementById(cbid); 
 
\t console.log(div); 
 
\t console.log(checkbox); 
 
\t if(checkbox.checked == true) { 
 
\t \t div.style.backgroundColor = "red"; 
 
\t } else { 
 
\t \t div.style.backgroundColor = "black"; 
 
\t } 
 
}
.excluded-prices { 
 
\t min-height: 55px; 
 
\t padding: 13px 0 0 0; 
 
\t border-top: 1px solid #eaeaea; 
 
\t float: left; 
 
\t width: 100%; 
 
\t position: relative; 
 
\t clear: left; 
 
\t margin: 10px 0 0 0; 
 
\t background: #f5fbf5; 
 
\t border-radius: 3px; 
 
} 
 

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

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

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

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

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

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

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

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

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

 
.eppt-price { 
 
\t color: #0898ff; 
 
\t text-align: center; 
 
\t padding: 0 0 3px 0; 
 
\t 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>

+1

我应该知道什么!谢谢你的帮助。 –

相关问题