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?

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?

• javascript
• jquery
• jquery-selectors

6 Answers 6

you can also try this using prop:

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

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

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");
});

Using removeAttr:

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

And since you only want to uncheck all items, use click (with a button, or whatever) instead of change.

Here's how I'd probably do it:

$('#selectAll').change(function() {
    $('.class_for_all_multi_selects option').prop('selected', this.checked);
});

Here's a jsfiddle to demonstrate. This implements a select all / unselect all, but you could make it just de-select only by setting the this.checked to false instead.

Not a problem.

$("#element_to_uncheck_all_options").click(function() {
    $(".class_for_all_multi_selects option").attr("selected", false);
});​

Now tested and works :)

Can just change value of the select to an empty value and jQuery will handle the rest, no loop required

 $('.class_for_all_multi_selects select').val('');