0

我有一个简单但麻烦的问题。我有一个<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。有什么想法可以解决这个问题吗？谢谢！

4

3 回答 3

6

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

$("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);
于 2013-10-30T16:12:24.310 回答
2

编辑——使用 Archer 的优秀答案！

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

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

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

于 2013-10-30T16:12:08.353 回答
0

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

 $('.skills-container.hidden').find(':checked').prop('checked',false):
于 2013-10-30T16:14:55.053 回答