Ellers tak, jeg samler ikke points. Læg selv et svar og accepter, så tråden lukkes =)
Løsningen ovenfor er knaldet sammen på et par minutter. En anden og måske bedre/kønnere udførelse ville måske være at anbringe alle checkbox'e i ét div - som så positioneres absolute og tildeles en left- og topværdi på f.eks. -20000px ... langt udenfor synsvidde.
Du kunne så nøjes med at have dine labels liggende i et div helt for sig selv:
<style type="text/css">
.multiSelect {
width: 120px;
height: 160px;
overflow: hidden;
border: 1px solid #999;
}
.multiSelect .boxStore {
position: absolute;
left: -20000px;
right: -20000px;
}
.multiSelect label {
display: block;
}
</style>
<script type="text/javascript">
function setColor(elmLine) {
var elmCheck = document.getElementById(elmLine.getAttribute("for"));
if (!elmCheck.checked) {
elmLine.style.background = "#000080";
elmLine.style.color = "#fff";
} else {
elmLine.style.background = "";
elmLine.style.color = "";
}
}
</script>
<div class="multiSelect">
<label for="hest" onclick="setColor(this)">HypHest</label>
<label for="ko" onclick="setColor(this)">MuhKo</label>
<label for="hund" onclick="setColor(this)">VovHund</label>
<div class="boxStore">
<input id="hest" name="blabla[]" type="checkbox">
<input id="ko" name="blabla[]" type="checkbox">
<input id="hund" name="blabla[]" type="checkbox">
</div>
</div>
