Countdown radios checked

by Alvin Olavarrieta

HTML

<div class="counter">
  <div class="counter-digit">2</div>
  <span class="counter-title">Selections Remaining</span>
</div>

<p>
  <div class="radio radio-info">
    <input type="radio" name="r1" value="1" id="r1">
    <label for="r1">Associate's in Computer Science</label>
  </div>
  <div class="radio radio-info">
    <input type="radio" name="r1" value="2" id="r2">
    <label for="r2">Bachelor's in Art History</label>
  </div>
  <div class="radio radio-info">
    <input type="radio" name="r1" value="3" id="r3">
    <label for="r3">Bachelor's in Organizational Psychology</label>
  </div>
  <div class="radio radio-info">
    <input type="radio" name="r1" value="4" id="r4" class="dontuse">
    <label for="r4">I wouldn’t have any interest in these Programs</label>
  </div>
</p>

<p>
  <div class="radio radio-info">
    <input type="radio" name="r2" value="1" id="r5">
    <label for="r5">Associate's in Computer Science</label>
  </div>
  <div class="radio radio-info">
    <input type="radio" name="r2" value="2" id="r6">
    <label for="r6">Bachelor's in Art History</label>
  </div>
  <div class="radio radio-info">
    <input type="radio" name="r2" value="3" id="r7">
    <label for="r7">Bachelor's in Organizational Psychology</label>
  </div>
  <div class="radio radio-info">
    <input type="radio" name="r2" value="4" id="r8" class="dontuse">
    <label for="r8">I wouldn’t have any interest in these Programs</label>
  </div>
</p>

<p>
  <div class="radio radio-info">
    <input type="radio" name="r3" value="1" id="r9">
    <label for="r9">Associate's in Computer Science</label>
  </div>
  <div class="radio radio-info">
    <input type="radio" name="r3" value="2" id="r10">
    <label for="r10">Bachelor's in Art History</label>
  </div>
  <div class="radio radio-info">
    <input type="radio" name="r3" value="3" id="r10">
    <label for="r10">Bachelor's in Organizational Psychology</label>
  </div>
  <div class="radio radio-info">
    <input type="radio" name="r3"...

JavaScript

// Counter handler
var elements = {};
var count = 0;            

$(':radio').each(function () {
    elements[$(this).attr('name')] = true;
});

$.each(elements, function () {
    count++;
});

var counter = $('.counter .counter-digit').text(count);

$(':radio').on('click', function () {
    var checked = $('div.radio-info').find(':checked').not('.dontuse').length;
    $('.counter .counter-digit').text(3-checked);
});