CODEWITHSUNDEEP
javascriptjqueryhtmlformscheckbox
PRYM
PRYM

Reputation: 533

Select from either checkbox or select-option

I have a form with checkboxes and multiple select options - 

<ul class="inline-list">
   <li><input type="checkbox" id="div1" name = "div1"/><label for="div1">Division1</label></li>
   <li><input type="checkbox" id="div2" name = "div2"/><label for="div2">Division2</label></li>
   <li><input type="checkbox" id="div3" name = "div3"/><label for="div3">Division3 East</label>/li>
</ul>

-------------- OR --------------

<select multiple style="height:100px">
    <option value='State1'>State1</option>
    <option value='State2'>State2</option>
    <option value='State3'>State3</option>
    <!-- 20 odd more options -->
</select>

Now I want to give option to either select division from the checkboxes or select State from the select options.

What I mean is if user select one division and then select one state then division selection should be cleared and when user selects division after selecting state then state selection should be cleared.

Upvotes: 0

Views: 429

Answers (1)

Mark Miller
Mark Miller

Reputation: 7447

Just set up some onchange event handlers to clear the appropriate section. Something like this:

$('input:checkbox').on('change', function(){
   $('select option:selected').removeAttr('selected');
});

$('select').on('change', function(){
    $('input:checkbox:checked').removeAttr('checked'); 
});

When a check box is checked, clear all selects... when a select is selected, clear all checkboxes...

See Fiddle Demo

Upvotes: 2

Related Questions