jQuery alter元素是否具有類

Question

我有一個簡單但麻煩的問題。 我有一個<select>字段和一些<div>與checkbox組。 當<select>字段的值更改時，我要檢查<div> ，如果它們具有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> 。 有什么想法可以解決這個問題？ 謝謝！

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

Answer 2

編輯 -使用Archer的出色答案！

您需要分別檢查每個“技能容器”：

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

當您使用.hasClass()類的API提出問題時，只會得到第一個匹配元素的答案。 通過使用.each()進行迭代，您可以分別對每個操作執行操作。

Answer 3

查找所有checked項目，並取消選中

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