Multi select used to toggle other elements
I have a multi select in a form and underneath this corresponding check boxes which are initally hidden.
What I wish to do is when the user selects or deselects an item in the multi select the corresponding check box is toggled to either show or hide.
I was imagining it would be something like this, I'm not sure what to put in place of the question marks. I've already tried click and select
-
$(document).ready(function() {
//Hide the checkboxes
$('#checkBox1').hide();
//When the user selects an option toggle the visibility of the checkbox
$('#option1').?????(function() {
$('#checkBox1).toggle(400);
});
});
Sample HTML
-
<select name="mySelect" multiple="multiple" size="5">
<option value="1" id="option1">Option 1</option>
<option value="2" id="option2">Option 2</option>
</select>
<div id="checkBox1"><input type="checkbox" name="box1" />Check box 1</div>
All help is much appreciated.
Thanks