PDA

View Full Version : shift-clickable checkbox list, with css styling



ahs10
01-16-2008, 06:29 PM
i would like to combine the two ideas below into one. the first one uses javascript to make a list of checkboxes selectable using shift-click...

<script>
var oldInp=0;
function clickage(evt) {
evt=(evt)?evt:event;
var target=(evt.target)?evt.target:evt.srcElement;
if (!evt.shiftKey) {
oldInp=target.id.substr(5);
return false;
}
target.checked=1;
var low=Math.min(target.id.substr(5),oldInp);
var high=Math.max(target.id.substr(5),oldInp);
var uncheck=1;
for (var i=low;i<=high;i++) {
uncheck &= document.getElementById('check'+i).checked;
document.getElementById('check'+i).checked=1;
}
if (uncheck) {
for(i=low;i<=high;i++) {
document.getElementById('check'+i).checked=0;
}
}
return true;
}
</script>
<body>
<script>
for(var i=0;i<30;i++)
document.write('<input type="checkbox" id="check'+i+'" onclick="clickage(event)">some text '+i+'<br>');
</script>
</body>

works lovely too. the next thing i would like to combine to that is this css styling of a list of checkboxes using labels. this gives a mouse over effect to the entire label, and also makes the checkbox clickable by clicking anywhere on the label (from the block display). here it is...

<style type="text/css">
.checklist {
border: 1px solid #ccc;
list-style: none;
height: 20em;
overflow: auto;
width: 16em;
}

.checklist, .checklist li { margin: 0; padding: 0; }

.checklist label {
display: block;
padding-left: 25px;
text-indent: -25px;
}

.checklist label:hover { background: #777; color: #fff; }
</style>

<form action="#" method="get">
<ul class="checklist">
<li><label for="o1"><input id="o1" name="o1" type="checkbox" /> Aenean malesuada ante eget tellus</label></li>
<li><label for="o2"><input id="o2" name="o2" type="checkbox" /> In posuere augue id velit</label></li>
<li><label for="o3"><input id="o3" name="o3" type="checkbox" /> Nullam a dui ac augue adipiscing sodales</label></li>
<li><label for="o4"><input id="o4" name="o4" type="checkbox" /> Vivamus consectetuer ante eget urna</label></li>
<li><label for="o5"><input id="o5" name="o5" type="checkbox" /> Aliquam id felis cursus purus tristique condimentum</label></li>
<li><label for="o6"><input id="o6" name="o6" type="checkbox" /> Suspendisse posuere lectus vitae velit consequat volutpat</label></li>
<li><label for="o7"><input id="o7" name="o7" type="checkbox" /> Fusce condimentum nulla et tortor.</label></li>
<li><label for="o8"><input id="o8" name="o8" type="checkbox" /> Proin consequat faucibus mi</label></li>
<li><label for="o9"><input id="o9" name="o9" type="checkbox" /> Etiam a lectus quis massa viverra laoreet</label></li>
<li><label for="o10"><input id="o10" name="o10" type="checkbox" /> Pellentesque gravida lorem vel odio</label></li>
</ul>
</form>

i'm not good with client side stuff, can someone help me combine these two, so that the mouseover works the same, and the shift clicking works with labels instead of just the checkboxes? i tried moving the id over to the label and attaching the onclick attribute to the label as well.... doesn't work. i think maybe because the js is trying to check or uncheck the element with the id? i don't know. could i have the label run js onclick that essentially runs the shift-click js for the checkboxes? i'm so server side, please help. thanks!