select multiple w/o Ctrl

by Kyle Mitofsky

HTML

<select multiple="multiple">
    <option id="1">Opt 1</option>
    <option id="2">Opt 2 </option>
    <option id="3">Opt 3</option>
    <option id="4">Opt 4</option>
</select>

<div class="select-multiple">
  <label><input type="checkbox" name="checkbox" value="1"><span>Opt 1</span></label>
  <label><input type="checkbox" name="checkbox" value="2"><span>Opt 2</span></label>
  <label><input type="checkbox" name="checkbox" value="3"><span>Opt 3</span></label>
  <label><input type="checkbox" name="checkbox" value="4"><span>Opt 4</span></label>
</div>



<div style='position:fixed;bottom:0;left:0; background:lightgray;width:100%;'>
    <b>About this SO question</b>:<br/>  
    <a href='http://stackoverflow.com/q/8641729/1366033'>
        How to avoid the need for ctrl-click in a multi-select box using Javascript?
    </a><br/>
    <b>Further Reading</b>:<br/>
    <a href='http://stackoverflow.com/q/6293588/1366033'>
        How to create an HTML checkbox with a clickable label
    </a><br/>    
    <a href='http://stackoverflow.com/q/5275857/1366033'>
        Highlight label if checkbox is checked
    </a><br/>    
    <a href='http://stackoverflow.com/q/17979781/1366033'>
        How can I hide a checkbox in html?
    </a>        
</div>

CSS

select {
  width: 75px;
}
.select-multiple {
  border: 1px solid grey;
  width: 75px;
}
.select-multiple label,
.select-multiple label span {
  display: block;
  width: 100%;
}
.select-multiple input[type="checkbox"] {
  opacity: 0;
  position: absolute;
}
.select-multiple :checked + span {
    background: #2727fd;
    color: white;
}

JavaScript

$('select[multiple] option').mousedown(function(e) {
    e.preventDefault();
    this.selected = !this.selected;
    return false;
});