チェック有無でリストの背景色を変えるとは、こういうの。
チェックが入ってない時、リストの背景色は黒(#000)に。入っている時は、緑色(#13b5b1)に変える内容。
チェックが入る(外す)とリストの背景色を変える
チェックが入ると、リストの背景色を変える処理は、ウェブで見かけたが。入ったチェックを外しても、リストの背景色を変える処理は、見かけなかったので。以下まとめ。
html チェックボックス箇所
<ul>
<li id="checkbox1"><input id="checkbox1_1" type="checkbox" name="list" value="1" onClick="changeBgc('checkbox1','checkbox1_1','#13b5b1')">checkbox1</li>
<li id="checkbox2"><input id="checkbox1_2" type="checkbox" name="list" value="1" onClick="changeBgc('checkbox2','checkbox1_2','#13b5b1')">checkbox2</li>
<li id="checkbox3"><input id="checkbox1_3" type="checkbox" name="list" value="1" onClick="changeBgc('checkbox3','checkbox1_3','#13b5b1')">checkbox3</li>
<li id="checkbox4"><input id="checkbox1_4" type="checkbox" name="list" value="1" onClick="changeBgc('checkbox4','checkbox1_4','#13b5b1')">checkbox4</li>
</ul>
html javascript箇所(</body>上などに入れる)ポイントは、リストのidとチェックボックスのid、2つ渡すこと。簡単な仕組みだが、当初はリストのidしか渡さなかったため、おかしいな・・・だった。
<script type="text/javascript">
<!--
function changeBgc(id,id2,color){if (document.getElementById(id2).checked == true) {</script>
document.getElementById(id).style.backgroundColor = color; }
else { document.getElementById(id).style.backgroundColor = '#000'; }
-->
以上、ご参考になれば幸いです。