jQuery alter element如果有类

Question

我有一个简单但麻烦的问题.我有一个<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中,在文档就绪函数中,在字段的.change事件中,<select>我执行以下操作:

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

显然它不起作用.我不确定我this是否正确使用该项目.适当地this指的是<select>元素而不是<div>具有类的元素hidden.有什么想法解决这个问题吗？谢谢!

Answer 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);