How do I count the number of select lists with selected values using JQuery?

Question

I am creating the mobile version on a current Rails app with a "quiz" feature. There is currently a count of how many questions you have answered being generated by this function.

function updateGroupProgressCounter($group){
 var count = $group.find('tr').has('input:checked').length;
 $group.parents('.carousel').find('.checkedCount').text( count);
}

I am changing the inputs from radio buttons to select boxes for mobile and want to keep the count feature but can't quite make it work so far. I've tried

var count = $group.find('tr').has('select option:selected').length;

but gives me the total number of questions in that group. Any help is appreciated.

charlietfl · Accepted Answer · 2013-12-20 23:36:06Z

2

I would toggle a class on the row based on select change event, then count those rows.

$('tr select').change(function(){
   $(this).closest('tr').toggleClass('answered', $(this).val()!='' );
});

Second argument of toggleClass determines whether to add/remove.

Then to get total rows:

$('tr.answered').length

toggleClass() API Docs

Another approach using filter() to count select that have value

var number_answered=$('tr select').filter(function(){
      return $(this).val !='';
}).length

edited Dec 20, 2013 at 23:36

answered Dec 20, 2013 at 22:59

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tyrel Denison Over a year ago

This should do the trick. I am conveniently already toggling the class to insure they have made a selection. I will just tie into that. Thanks.

Thomas Junk · Accepted Answer · 2013-12-20 22:57:03Z

0

Probably you are looking for something like this:

$("#boxes").on("change","input", function(){
    $("#total").val($("#boxes input:checked").length);  
});

Play around with the fiddle

answered Dec 20, 2013 at 22:57

Thomas Junk

5,6962 gold badges34 silver badges48 bronze badges

Comments

Ranjit Singh · Accepted Answer · 2013-12-20 23:07:59Z

0

Considering the value of first element of your select list is empty(i.e "")

So the code will be

var count = 0;
$group.find('tr select').each(function(){
   if(this.value.length)
     count++;
});

I know this is not the best way to do it. Adding and removing class on the basis of selection and finally finding the length of element that contains required class would be better approach as suggested by @charlietfl.

answered Dec 20, 2013 at 23:07

Ranjit Singh

3,7351 gold badge23 silver badges36 bronze badges

Collectives™ on Stack Overflow

How do I count the number of select lists with selected values using JQuery?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related