CODEWITHSUNDEEP
jquery
Lee Price
Lee Price

Reputation: 5212

jQuery doesn't count the elements in its parent correctly

I'm creating an accordion menu that shows the next item when all the check boxes are selected.

It works on the first step, but once it get past the first item in the accordion menu it doesn't count the number of checkboxes correctly.

This is what I have so far http://jsfiddle.net/EDYqs/ ... I've left alerts in so you can see the number of check boxes it is finding.

This is really difficult to explain, so you'll have to see for yourself what the problem is.

Upvotes: 0

Views: 97

Answers (2)

GregL
GregL

Reputation: 38121

You need to use .closest(), rather than .parent(), as the <dd> is not the immediate parent of the checkboxes (what this is set to inside the click handlers).

e.g.

$('input[type=checkbox]').on('change', function(){
      available = $(this).closest('dd').find('input[type=checkbox]').length;
      checked = $(this).closest('dd').find('input[type=checkbox]:checked').length;

      // ...
});

Also, consider using <label>s for the checkbox text, with their for attribute set to the ID of the checkbox (you'll need to give each of the checkboxes a unique ID of course). This allows the user to click the text to toggle the checkbox and also for accessibility technology like screenreaders to know what the description of that checkbox is.

Upvotes: 0

Yorgo
Yorgo

Reputation: 2678

just replace parent("dd") to parent().

        available = $(this).parent().children('input[type=checkbox]').length;
        checked = $(this).parent().children('input[type=checkbox]:checked').length;

Upvotes: 1

Related Questions