When an option is selected the corresponding checkbox <div>
is automatically hidden using jQuery. For example, user selects Item 1 from the select box, and <div class="item1">
is immediately hidden.
Caveat: Both will be visible, so the user changing the select option must be accounted for (eg. user selects an option who's corresponding checkbox has already been checked). The checked state must be removed and the corresponding <div>
should hide.
Needs to be compatible with FF, Safari, Opera, IE7 + 8 (6 if possible, not required)
Update: The corresponding <div>
of the default selected option should be hidden on page load.
Update 2: This is now resolved. Thanks a ton to both Joel and ckramer. Both proposed solutions work perfectly. I chose ckramer's solution as the accepted answer because it required no extra markup, but both solutions work great!
<select>
<option selected="selected" id="item1" value="1">Item 1</option>
<option id="item2" value="2">Item 2</option>
<option id="item3" value="3">Item 3</option>
</select>
<div class="item1">
<input type="checkbox" id="a-item1" value="5" />
<label class="checkbox" for="a-item1">Item 1</label>
</div>
<div class="item2">
<input type="checkbox" id="a-item2" value="6" />
<label class="checkbox" for="a-item2">Item 2</label>
</div>
<div class="item3">
<input type="checkbox" id="a-item3" value="7" />
<label class="checkbox" for="a-item3">Item 3</label>
</div>