Small Chaos Incorporated

Multiple Select Listbox

Thanks to Justinsomnia.org for the inspiration! I was never happy with the blinky javascript versions. Here is my modified version based on the checkbox theory shown on Justinsomnia.org. The checkboxes are hidden and javascript for selecting 'All', 'None', and 'Invert'. I made 'dime' and 'dog' preselected to show what changes need to be made when loading saved values.

You may try out the listbox and review the code below:

<style type="text/css">
a.mselect {
color: red;
text-decoration: none;
}

a.mselect:hover {
background: #ff8;
}

div.mselect_container {
    font:13.3px sans-serif;
    width:200px;
    border-left:1px solid #808080;
    border-top:1px solid #808080;
    border-bottom:1px solid #fff;
    border-right:1px solid #fff;
    position:relative;
    left:300px;
}

div.mselect_inner {
    background:#fff;
    overflow:auto;
    width:200px;
    height:90px;
    vertical-align:top;
    border-left:1px solid #404040;
    border-top:1px solid #404040;
    border-bottom:1px solid #d4d0c8;
    border-right:1px solid #d4d0c8;
    position:relative;
    top:0px;
    right:181px;
}
</style>
<script language="javascript">
<!--
function highlight_div(checkbox_node)
{
    label_node = checkbox_node.parentNode;

    if (checkbox_node.checked)
    {
        label_node.style.backgroundColor='#0a246a';
        label_node.style.color='#fff';
    }
    else
    {
        label_node.style.backgroundColor='#fff';
        label_node.style.color='#000';
    }
}

function click_item(item)
{
    item.checked = !item.checked;
    highlight_div(item);
}

function click_elmt(elmt)
{
    if (document.getElementById) {
        list_elmt = document.getElementById(elmt);
    } else {
        list_elmt = document.all[elmt];
    }
    if (list_elmt != null) {
        click_item(list_elmt);
    }
}

function select_all(base_group_name)
{
    var done = false;
    var i = 1;
    var list_elmt;
    while(!done) {
        if (document.getElementById) {
            list_elmt = document.getElementById(base_group_name + i);
        } else {
            list_elmt = document.all[base_group_name + i];
        }
        if (list_elmt != null) {
            if (!list_elmt.checked) {
                click_item(list_elmt);
            }
            i++;
        } else {
            done = true;
        }
    }
}

function select_none(base_group_name)
{
    var done = false;
    var i = 1;
    var list_elmt;
    while(!done) {
        if (document.getElementById) {
            list_elmt = document.getElementById(base_group_name + i);
        } else {
            list_elmt = document.all[base_group_name + i];
        }
        if (list_elmt != null) {
            if (list_elmt.checked) {
                click_item(list_elmt);
            }
            i++;
        } else {
            done = true;
        }
    }
}

function select_invert(base_group_name)
{
    var done = false;
    var i = 1;
    var list_elmt;
    while(!done) {
        if (document.getElementById) {
            list_elmt = document.getElementById(base_group_name + i);
        } else {
            list_elmt = document.all[base_group_name + i];
        }
        if (list_elmt != null) {
            click_item(list_elmt);
            i++;
        } else {
            done = true;
        }
    }
}
// -->
</script>

<div class="mselect_container">
<div class="mselect_inner">
<a href="javascript:select_all('mcb');" class="mselect">All</a> | 
<a href="javascript:select_none('mcb');" class="mselect">None</a> | 
<a href="javascript:select_invert('mcb');" class="mselect">Invert</a>

<label for='mcb1' style='padding-right:3px;display:block;' 
        onClick='click_elmt("mcb1");'>
    <input name='checkbox[]' value='1' type='checkbox' id='mcb1' 
        style="display:none;">dill pickle</label>
        
<label for='mcb2' style='padding-right:3px;display:block;color:#fff;background-color:#0a246a;' 
        onClick='click_elmt("mcb2");'>
    <input name='checkbox[]' value='2' checked type='checkbox' id='mcb2' 
        style="display:none;">dime</label>

<label for='mcb3' style='padding-right:3px;display:block;' 
        onClick='click_elmt("mcb3");'>
    <input name='checkbox[]' value='3' type='checkbox' id='mcb3' 
        style="display:none;">dinosaur</label>

<label for='mcb4' style='padding-right:3px;display:block;color:#fff;background-color:#0a246a;' 
        onClick='click_elmt("mcb4");'>
    <input name='checkbox[]' value='4' checked type='checkbox' id='mcb4' 
        style="display:none;">dog</label>

<label for='mcb5' style='padding-right:3px;display:block;' 
        onClick='click_elmt("mcb5");'>
    <input name='checkbox[]' value='5' type='checkbox' id='mcb5'
        style="display:none;">dove</label>

<label for='mcb6' style='padding-right:3px;display:block;' 
        onClick='click_elmt("mcb6");'>
    <input name='checkbox[]' value='6' type='checkbox' id='mcb6' 
        style="display:none;">dragon</label>

<label for='mcb7' style='padding-right:3px;display:block;' 
        onClick='click_elmt("mcb7");'>
    <input name='checkbox[]' value='7' type='checkbox' id='mcb7' 
        style="display:none;">duck</label>
</div>
</div>