code messier than it should be

code messier than it should be

I have groups of check boxes. 
When a checkbox is ticked/unticked i want to check if any check boxes in the same group are checked.

I have the following HTML, this is dynamically generated so there could be any number of 'groups'



  2.         <div class="group">
  3.             <span class="title--bold">Time Found</span>
  4.             <span><input type="checkbox" name="vehicle" value="Bike"> Today</span>
  5.             <span><input type="checkbox" name="vehicle" value="Bike"> Yesterday</span>
  6.             <span><input type="checkbox" name="vehicle" value="Bike"> Last week</span>
  7.             <span><input type="checkbox" name="vehicle" value="Bike"> Never</span>
  8.         </div>

  10.         <div class="group">
  11.             <span class="title--bold">Animal Type</span>
  12.             <span><input type="checkbox" name="vehicle" value="Bike">Cats</span>
  13.             <span><input type="checkbox" name="vehicle" value="Bike">Dogs</span>
  14.         </div>
And this is my javascript

  1. $(document).ready(function () {
  2.         
  3.         $("input[type=checkbox]").on("click" ,function () {

  5.             console.log('mek');

  7.             var n = 0;

  9.             var rows = $(this).parent().parent().children('span');
  10.             
  11.             rows.each(function () {
  12.                 l = $(this).children('input:checked').length;
  13.                 n = n + l;
  14.             });

  16.             console.log(n);

  18.         });

  20.     });
To me it seams to be messier than it should be
What it does is find the . group element which the target input element belongs to and then counts the children which match the 'input:checked' selector.

Due to the fact that each 'input' is nested inside a 'span' (and so is not a direct child of .group using .parent().parent() is necessary to get the .group
Due to the fact that once we have .group the elements i am interested in are not direct children it is nessesary to use .each() 
And i have also had to store the matches in 'n' instead of using .length.

Is there any way this can be made shorter?

Perhaps the row " var rows = $(this).parent().parent().children('span');" could become something like " var rows = $(this).parent().siblings() "

Is there any way the .each() can be removed?
Is there any way .length can be used instead of a counter (without removing the span tags)?