如何使用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.

我有多个具有相同类的多选框，我想取消选择一个事件。它们都有一个div，它们周围有相同的class class_for_all_multi_selects。

$("#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?

如何使用jquery按类取消选中多个选择框选项？

6 个解决方案

#1

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/

看看：http：//jsfiddle.net/EVrrz/3/

#2

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

使用removeAttr（）从所有选项中删除所选属性

$('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是一个div，你应该绑定到click事件而不是更改

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

#3

Using removeAttr:

使用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.

而且由于您只想取消选中所有项目，请使用单击（使用按钮或其他）而不是更改。

#4

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.

这是一个证明的jsfiddle。这实现了一个select all / unselect all，但你只能通过将this.checked设置为false来取消选择。

#5

Not a problem.

不是问题。

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

Now tested and works :)

现在测试和工作:)

#6

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

可以只将select的值更改为空值，jQuery将处理其余的，不需要循环

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