Checkboxes into a multi-select list?

Hello,

I saw this somewhere, where the user can just click the checkbox to select an item from the list instead of pressing CTRL and the left mouse click.

Please help. Thanks.

You mean like normal checkboxes?

<form>
  <fieldset>
    <legend>Stuff</legend>
    <label><input type="checkbox" name="foo1" value="bar1"> Bar1!</label>
    <label><input type="checkbox" name="foo2" value="bar2"> Bar2!</label>
    <label><input type="checkbox" name="foo3" value="bar3"> Bar3!</label>
    <label><input type="checkbox" name="foo4" value="bar4"> Bar4!</label>
    <label><input type="checkbox" name="foo5" value="bar5"> Bar5!</label>
  </fieldset>
</form>

No, like the attached image.

That’s not actually a select at all, it’s a div containing a list of checkboxes. It just pretends to be a select.

In fact, you could achieve the same thing with the code I posted above, with a smattering of CSS and a little bit of javascript:

var labels = document.getElementById('theForm').getElementsByTagName('label');
for (var i = 0, j = labels.length; i < j; i++) {
  labels[i].onclick = function() {
    this.firstChild.checked = true;
    this.className = 'highlight';
  }
}
label {
  display:block;
}
label.highlight {
  background-color:blue;
}

It’s not working:

<style type=“text/css”>
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url(“images/back40.gif”)}
</style>

<script type=“text/javascript”>
var labels = document.getElementById(‘theForm’).getElementsByTagName(‘label’);
for (var i = 0, j = labels.length; i < j; i++) {
labels[i].onclick = function() {
this.firstChild.checked = true;
this.className = ‘highlight’;
}
}
</script>

<form>
<fieldset>
<legend>Stuff</legend>
<label><input type=“checkbox” name=“foo1” value=“bar1”> Bar1!</label>
<label><input type=“checkbox” name=“foo2” value=“bar2”> Bar2!</label>
<label><input type=“checkbox” name=“foo3” value=“bar3”> Bar3!</label>
<label><input type=“checkbox” name=“foo4” value=“bar4”> Bar4!</label>
<label><input type=“checkbox” name=“foo5” value=“bar5”> Bar5!</label>
</fieldset>
</form>

What’s wrong?

Thanks.

You need to give your form an id. ‘theForm’ is used in the script.


<form id='theForm'>

It will also fail because the SCRIPT element is before the FORM. Either wrap it in a window.onload closure or put the SCRIPT after the FORM. You will also need to add the CSS I provided to yours.

Instead of just flailing saying “it’s not working!!” you should try and step back and look at what might be wrong, and check your code and what has been given to you. The best thing, of course, is if you make an effort to understand the code that you’re using.

When the script first runs there is nothing that exists below the script. As such, no elements are available at that time, so you need to run the script after the page has finished loading. This allows you to keep the code in the traditional head location.


<html>
<head>
    <script>
    window.onload = function () {
        ...
    }
    </script>
<body>
...
</body>
</html>

Preferably, place the script at the end of the body. This is the best practice to speed up you web site and is the preferred unobtrusive javascript manner used these days.


<html>
<head>
<body>
...
    <script>
    ...
    </script>
</body>
</html>

To achieve this, you just need to set the div’s height and set overflow:scroll;

It is a cute little thing though, I think – looks like a ul with alternative backgrounds and overflow:scroll.

<html>
<head>
<body>
<script>

</script>
</body>
</html>

Thanks you!