March 22, 2012

How can i uncheck multiple select box options by class with jquery?

Question by tonymarschall

I have multiple multi-select boxes with the same class and i want to unselect all on an event. They have all a div with the same class class_for_all_multi_selects around them.

$("#element_to_uncheck_all_options").change(function() {
  $('.class_for_all_multi_selects'). ...?
});

<div class="class_for_all_multi_selects">
  <select multiple="multiple" name="1">
    <option value="1">option1</option>
    <option value="2">option2</option>
  </select>
</div>

<div class="class_for_all_multi_selects">
  <select multiple="multiple" name="2">
    <option value="1">option1</option>
    <option value="2">option2</option>
  </select>
</div>

How can i uncheck multiple select box options by class with jquery?

Answer by Jigs

you can also try this using prop:

 $("div.class_for_all_multi_selects option:selected").prop('selected',false);

check it out : http://jsfiddle.net/EVrrz/3/

Answer by Starx

Use removeAttr() to remove the selected attribute from all options

$('select option:selected').removeAttr("selected");

Since you said #element_to_uncheck_all_options is a div, you should bind to click events instead of change

$("#element_to_uncheck_all_options").click(function() {
   $('select option:selected').removeAttr("selected");
});

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+

...

Please fill the form - I will response as fast as I can!