この関数を使用して標準の html チェックボックスを置き換えています。現在配置されている場所でlabel for
はなく、属性から呼び出したいと思います。<div>
<div>
の代わりに子を呼び出せるように変更する方法がわかりませんonclick="toggle_colorbox(this);"
。これを多数のチェックボックスに使用しているため、IDで呼び出したくありません。
HTML
<label for="color_Black"><div style="background-color: #000000" class="color" onclick="toggle_colorbox(this);"><div class=CheckMark>✓</div>
<input type="checkbox" name="color[]" value="Black" id="color_Black" class="cbx"/></div>Black</label>
JS
function toggle_colorbox(span) {
div = span.getElementsByTagName('div')[0];
cb = span.getElementsByTagName('input')[0];
if (cb.checked == false) {
div.style.visibility = "visible";
span.className = "color ColorboxSelected";
cb.checked = true;
}
else {
div.style.visibility = "hidden";
span.className = "color";
cb.checked = false;
}
}
CSS
.color { border: 1px solid silver; vertical-align:baseline; margin-right:4px; width: 1.65em; height:1.65em; font-size:8px;float:left; }
.color input {height: 100%; width: 100%; font-size:200%;}
.ColorboxSelected {opacity: 0.5; filter: alpha(opacity = 50);}
.ColorboxSelected .CheckMark {visibility: visible; }
.CheckMark {position:relative; top:-2px; vertical-align:middle; text-align:center ; color:white; font-family: Arial Narrow; font-size:1.6em; display:block; visibility:hidden; } /* text-shadow: black 0.1em 0.1em 0.2em;*/
.cbx { visibility:hidden; display:none;}