チェックボックスをオンにしたときに表示色を変更します

Question

divの色を、onchangeの機能を割り当ててチェックボックスをクリックして変更しようとしています。関数内にvar div idとvar checkboxの両方に対してnullが得られます。何か不足していますか？または、CSSを使用するだけでこれを行う方法はありますか？

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>

Answer 1

あなたは、単一引用符が欠落している：

check('cbinternet','internet') 

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

Answer 3

をここにミスをした：

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

要素IDは文字列でなければなりません。今あなたはヌルオブジェクトを渡しています。

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>