jQuery改变元素如果有类

Posted 2023-05-09

【中文标题】jQuery改变元素如果有类

【英文标题】：jQuery alter element if has class

【发布时间】：2013-11-10 08:56:14

【问题描述】：

我有一个简单但麻烦的问题。我有一个<select> 字段和一些<div>s 和checkbox 组。当<select> 字段的值发生更改时，我想检查<div>s，如果他们有hidden 类，那么我想取消选中他们所有的复选框。

<select id="myselect">
  <option value="1">some value 1</option>
  <option value="2">some value 2</option>
</select>

<div id="skills-container-1" class="skills-container hidden"> 
  <fieldset id="P2_SKILLS_1" class="checkbox_group">
    <input type="checkbox" name="p_v16" value="2033"><br>
    <input type="checkbox" name="p_v17" value="2034"><br>
    <input type="checkbox" name="p_v18" value="2035"><br>
  </fieldset>
</div>
<div id="skills-container-2" class="skills-container hidden"> 
  <fieldset id="P2_SKILLS_2" class="checkbox_group">
    <input type="checkbox" name="p_v19" value="2036"><br>
    <input type="checkbox" name="p_v20" value="2037"><br>
    <input type="checkbox" name="p_v21" value="2038"><br>
  </fieldset>
</div>

在 javascript 中，在文档就绪函数中，在 <select> 字段的 .change 事件中，我执行以下操作：

if ($('.skills-container').hasClass('hidden')) 
 $(this).find('input').removeAttr('checked');

显然它不起作用。我不确定我是否正确使用了 this 项目。可能this 指的是<select> 元素，而不是具有hidden 类的<div>。 有什么想法可以解决这个问题吗？谢谢！

【参考方案1】：

一个简单的单线就可以做到这一点......

$("div.skills-container.hidden input:checkbox").prop("checked", false);

它会在 div 中找到类 .skills-container 和 .hidden 的所有复选框，并将属性 checked 设置为 false。

把它放在你的更改事件中:)

编辑： 正如 Alnitak 所建议的，您可以通过仅选择当前选中的复选框来进一步缩小选择范围，而不是将它们设置为未选中状态。这可能会或可能不会对性能产生影响，但绝对值得检查您是否有很多可能受此影响的复选框。

$("div.skills-container.hidden input:checkbox:checked").prop("checked", false);

【讨论】：

@eyetea 也注意到这个答案的（正确）使用.prop('checked', false) 而不是.removeAttr 来更新复选框。

感谢speedoflight anwser！工作正常！

您可能考虑将:checked 限定符添加到选择器。

@Alnitak 好点。如果我们不是在谈论很多复选框，那么它可能不会有任何区别，我（个人）宁愿选择更短的选择器，但需要进行性能测试来说明在所有复选框上设置属性是否更快其中，或检查所有这些属性，然后将其设置在一些上。我内心的强迫症在不久的将来会看到 jsperf ;)

复选框不超过200个

【参考方案2】：

edit — 使用 Archer 的优秀答案！

您需要分别检查每个“技能容器”：

$('.skills-container').each(function() 
  if ($(this).hasClass('hidden'))
    $(this).find('input').prop('checked', false);
);

当您使用 .hasClass() 之类的 API 提问时，您只会得到第一个匹配元素的答案。通过使用.each() 进行迭代，您可以分别对每一个执行操作。

【讨论】：

为什么要分开？ @Archer 的回答对我来说很好。

@Alnitak 是的，它更好！ :)

You are of course correct that .hasClass will only work on one element at a time, but why bother with .hasClass when a selector will do all of the work for you.

感谢您的快速答复！ @Archer's anwser 对我来说很好用:)

@eyetea 这不是我的答案——我只是在评论

【参考方案3】：

找到所有checked 项目并将其取消选中

 $('.skills-container.hidden').find(':checked').prop('checked',false):

【讨论】：

有时取消选中所有内容比让 jQuery 更努力地找到所需的元素更容易。 Archer 答案中的单个选择器在使用选择器后跟.find() 的现代浏览器上会更有效。 jQuery 伪选择器例外，最好将标准 CSS 选择器分开。