I have a simple but troublesome issue. I have a <select> field and some <div>s with checkbox groups. When the value of the <select> field is changed, I want to check the <div>s and if they have the class hidden then I want to uncheck all their checkboxes.

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

In javascript, in document ready function, at the .change event of the <select> field I do the following:

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

and apparently it doesn't work. I am not sure if I am using the this item correctly. Propably this refers to the <select> element and not the <div> that has the class hidden. Any thoughts to solve this problem? Thanks!

I have a simple but troublesome issue. I have a <select> field and some <div>s with checkbox groups. When the value of the <select> field is changed, I want to check the <div>s and if they have the class hidden then I want to uncheck all their checkboxes.

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

In javascript, in document ready function, at the .change event of the <select> field I do the following:

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

and apparently it doesn't work. I am not sure if I am using the this item correctly. Propably this refers to the <select> element and not the <div> that has the class hidden. Any thoughts to solve this problem? Thanks!

• javascript
• jquery
• html
• jquery-selectors
• this

Share Improve this question Follow asked Oct 30, 2013 at 16:10 eyetteaeyettea 1,44622 gold badges1717 silver badges3636 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

A simple one-liner will do that...

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

It finds all the checkboxes inside divs with the classes .skills-container and .hidden and sets the property checked to false.

Just put that inside your change event :)

Edit: As suggested by Alnitak, you could narrow the selection down even further by only selecting the checkboxes that are currently checked, rather than setting them to unchecked regardless. This may or may not have an impact on performance, but it's definitely worth checking if you have a lot of checkboxes that could be affected by this.

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

edit — use Archer's superior answer!

You'll need to check each "skills container" separately:

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

When you're asking questions with APIs like .hasClass(), you only get an answer for the first matched element. By iterating with .each() you can perform the operation separately on each one.

Find all the checked items and make it unchecked

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