使用jQuery选择所有选项

Question

我有一个选项列表，我想实现它的全选功能。我要做的是，如果调用父选项（选项Pa1），则应该选择同一类（11）中的所有选项元素。我如何在jQuery中做到这一点？

<select multiple="multiple" name="section_1" class="section_1">
    <option value="1" class="11 parent">Option Pa1</option>
    <option value="2"  class="11">Option 2</option>
    <option value="3" class="11">Option 3</option>
    <option value="11" class="11">Option 1</option>
    <option value="22" class="22 parent">Option Pa2</option>
    <option value="33" class="22">Option 3</option>
    <option value="44" class="22">Option 4</option>
</select>

Answer 1

您可以听.parent类的所有选项的单击。

然后是更改所单击元素的select属性，然后将每个元素直到更改为带有.parent的下一个选项的情况。您可以使用.nextUntil()扩展选择，并使用.nextUntil()更改属性：

.prop()

.prop()

$('select .parent').on('click', function(){
    $(this).nextUntil('.parent').prop('selected', true);
});

请确认注释

$('select .parent').on('click', function(){
    $(this).nextUntil('.parent').prop('selected', true);
});

-最终用户通常希望单击该选项时只能选择一个选项，特别是因为没有立即表明某些选项是其他选项的“父项”。用他的话说； 这种UI设计更适合复选框：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="section_1" class="section_1" multiple>
    <option value="1" class="11 parent">Option Pa1</option>
    <option value="2"  class="11">Option 2</option>
    <option value="3" class="11">Option 3</option>
    <option value="11" class="11">Option 1</option>
    <option value="22" class="22 parent">Option Pa2</option>
    <option value="33" class="22">Option 3</option>
    <option value="44" class="22">Option 4</option>
</select>

written by Rory

Answer 2

[当父选项为

$('ul input[type=checkbox]').change(function() {
  $(this).closest('li').find('input[type=checkbox]').prop('checked', this.checked);
});

时，选择具有相同类别的所有选项，然后使用

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li><input type='checkbox'>Option Pa1
    <ul>
      <li><input type='checkbox'>Option 2</li>
      <li><input type='checkbox'>Option 3</li>
      <li><input type='checkbox'>Option 1</li>
    </ul>
  </li>
  <li><input type='checkbox'>Option Pa2
    <ul>
      <li><input type='checkbox'>Option 3</li>
      <li><input type='checkbox'>Option 4</li>
    </ul>
  </li>
</ul>

将其标记为已选择。注意：我在这里假设父元素只有两个“父”类，然后它们与子选项共享。如果不是这种情况，则必须使用HTML5 clicked属性约定来定义一致的分组属性。

请参见下面的可运行示例。

prop

prop

data-*