jQuery alter element if has class
jQuery alter element if has class
我有一个简单但麻烦的问题。我有一个<select>
领域和一些<div>
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>
。有什么想法可以解决这个问题吗?谢谢!
一个简单的单行代码就可以做到这一点...
$("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);
编辑 — 使用Archer的高级答案!
您需要单独检查每个"技能容器":
$('.skills-container').each(function() {
if ($(this).hasClass('hidden'))
$(this).find('input').prop('checked', false);
});
当您使用 .hasClass()
等 API 提问时,您只能获得第一个匹配元素的答案。通过使用.each()
进行迭代,您可以分别对每个操作执行操作。
查找所有checked
项并将其取消选中
$('.skills-container.hidden').find(':checked').prop('checked',false):
相关文章:
- RegEx删除空属性?例如,如果(class=“”||class=“”)移除;否则就下课
- 当浏览器上的后退按钮到达主页时,我需要删除Class
- 通过id和class属性获取元素
- 菜单栏class=活动引导程序主题无法正常工作
- $(.class).empty总是缺少一个元素
- Javascript GetElementByID has no value
- jQuery[button.class]未检测到用按钮追加行
- javascript点击函数不;不适用于ID和Class
- HTML class=Ajax操作,如何让类点击调用好的操作
- Add a class if var < 0 jquery
- 将鼠标悬停在Angular JS中的一个元素上,并将Class添加到另一个元素中
- Difference between methods of defining JavaScript 'class
- todomvc Backbone's更改为class'编辑'使todo可编辑
- 使用jQuery隐藏和显示具有相同Class的类
- JQuery选择器:如果同级具有.class,则选择td
- jQuery:具有class但不具有$(this)的元素
- Why does "document.querySelector('a.some class'
- jQuery alter element if has class
- Show hidden div on li has class 'selected'
- How do i formulate "if this.children.has.not.class"