仅在标签单击时选择 optgroup 的子级答案

【问题标题】：Select children of optgroup only on tag click仅在标签单击时选择 optgroup 的子级
【发布时间】：2019-10-27 08:55:42
【问题描述】：

我正在尝试使用optgroup 标签来选择组中的所有选项。

这很好，但是，当我还选择一个组 <option> 时，它会选择所有 optgroup 元素。如何使选择仅基于optgrouptag？

$(document).ready(function() {
  $("optgroup").on("click", function() {
    $(this).children("option").prop("selected", true);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
  <optgroup label="Group1">
    <option value="11">Option 1</option>
    <option value="12">Option 2</option>
  </optgroup>
  <optgroup label="Group2">
    <option value="21">Option 1</option>
    <option value="22">Option 2</option>
  </optgroup>
</select>

【问题讨论】：

标签： javascript jquery jquery-selectors optgroup

【解决方案1】：

检查元素的标签名称，因为它会冒泡。循环遍历每个选项，只检查未检查的选项。

$(document).ready(function() {
  $("optgroup").on("click", function(e) {
    if(e.target.tagName === 'OPTGROUP'){
      $(this).children("option").each(function(){
        this.selected = !this.selected;
      });
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select multiple size=6>
  <optgroup label="Group1">
    <option value="11">Option 1</option>
    <option value="12">Option 2</option>
  </optgroup>
  <optgroup label="Group2">
    <option value="21">Option 1</option>
    <option value="22">Option 2</option>
  </optgroup>
</select>

【讨论】：

它确实确实有效根据您的描述：I also need it to deselect the elements if they are already selected.您的编辑与该声明相矛盾。
我认为您误解了我之前的陈述（这绝不是贬义），但是是的...语义...您确实回答了我的问题，这就是我接受答案的原因...但是，现实地切换选定的项目（即使我在第一个注释中看到了措辞冲突）似乎适得其反，因为从视觉的角度来看，它似乎以半意外的行为做出反应......无论哪种方式，这都是一个很好的答案，并给出了我需要的东西由于您提到了.tagName 属性，再次感谢！