CODEWITHSUNDEEP
jquery
Ianthe
Ianthe

Reputation: 5709

JQuery : Count children that is checked in a <li> tag

I have a tree view using html tags, when the "tvcheckbox attrParent" is checked, how can I count all its children "tvcheckbox attr" which where checked using JQuery.

 <li class="others"><input type="checkbox" value="ALPHABETS" class="tvcheckbox attrParent">ALPHABETS
    <ul>
        <li><input type="checkbox" class="tvcheckbox attr" value="A">A</li>
        <li><input type="checkbox" class="tvcheckbox attr" value="B">B</li>
        <li><input type="checkbox" class="tvcheckbox attr" value="C">C</li>
        <li><input type="checkbox" class="tvcheckbox attr" value="D">D</li>
        <li><input type="checkbox" class="tvcheckbox attr" value="E">E</li>
        <li><input type="checkbox" class="tvcheckbox attr" value="F">F</li>
    </ul>
</li>

I tried 

   `$('input.tvcheckbox.attrParent:checked').each(function(){
           var len = $(this).parent().children(".checked").length;
    });`

but is not successful. Can anyone help? Thank you in advance.

Upvotes: 0

Views: 5037

Answers (5)

Ashik
Ashik

Reputation: 317

Here is a working sample. I have not tried grouping the check-boxes in this sample.

<html>
  <head>
    <title>Check Test</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btnGet").click(function () {
                var checkedItems = "";
                $("input[type='checkbox']").each(function (i) {
                    if ($(this).attr("checked") == true) {
                        checkedItems += "," + $(this).val();
                    }
                });
                alert(checkedItems.slice(1));
            });
        });
    </script>
  </head>
  <body>
    <input type="checkbox" value="ALPHABETS" class="tvcheckbox attrParent" />ALPHABETS
    <ul>
        <li><input type="checkbox" class="tvcheckbox attr" value="A" />A</li>
        <li><input type="checkbox" class="tvcheckbox attr" value="B" />B</li>
        <li><input type="checkbox" class="tvcheckbox attr" value="C" />C</li>
        <li><input type="checkbox" class="tvcheckbox attr" value="D" />D</li>
        <li><input type="checkbox" class="tvcheckbox attr" value="E" />E</li>
        <li><input type="checkbox" class="tvcheckbox attr" value="F" />F</li>
    </ul>
    <input type="button" value="Get checked" id="btnGet"/>
  </body>
</html>

Upvotes: 0

Ravi Gadag
Ravi Gadag

Reputation: 15861

$('.tvcheckbox.attrParent').change(function(){
alert($('.tvcheckbox.attr:checked').length)
    });​

See demo in JsFiddle

Upvotes: 0

zsquare
zsquare

Reputation: 10146

Im assuming the rest of your selectors are correct.

$('input.tvcheckbox.attrParent:checked').each(function(){
   var len = $(this).parent().children(":checked").length;
});

Read more about the :checked selector here

Upvotes: 0

Ianthe
Ianthe

Reputation: 5709

I think I found the answer :

$(this).parent().find('input.tvcheckbox.attr:checked').length;

Anyway, thank you for all the views. :)

Upvotes: 3

Kanishka Panamaldeniya
Kanishka Panamaldeniya

Reputation: 17576

  var len = 0 ;

$('.others').find('li').each(function(){

      if($(this).find('checkbox').is(':checked'))
      { 
          len++;
      }    

});

Upvotes: 0

Related Questions