How to catch the event when none of checkboxes from group is checked or at least one checkbox is checked and then add a class for the related div?

Question

<div class="accordion-group">
    <div class="accordion-heading">
        <a href="#collapse" data-parent="#accordionQuiz" data-toggle="collapse1.." class="accordion-toggle">
        <strong>1...</strong>
        Question
        </a>
    </div>

    <div class="accordion-body collapse" id="collapse1..">
        <div class="accordion-inner">
            <div class="control-group">
                <label for="1..@1.." class="control-label">A..</label>
                <div class="controls">
                    <label class="checkbox">
                    <input type="checkbox" value="FirstAnswer" name="1..@1.." id="1..@1..">
                    content
                    </label>
                </div><!-- /.controls -->
            </div><!-- /.control-group -->

            <div class="control-group">
                <label for="2..@2.." class="control-label">B..</label>
                <div class="controls">
                    <label class="checkbox">
                    <input type="checkbox" value="SecondAnswer" name="2..@2.." id="2..@2..">
                    content
                    </label>
                </div><!-- /.controls -->
            </div><!-- /.control-group -->

        </div><!-- /.accordion-inner -->
    </div><!-- /.accordion-body collapse .. -->
</div><!-- /.accordion-group -->

---

Above code is a piece of Quiz form and is repeating for every question. It looks like: Example

---

How to catch the event when none of question-related-checkboxes is checked or at least one is checked and then add a class for the div.accordion-heading ?

Something like: none is checked - empty , at least one - not-empty .

There'll be diferent colours and it'll be very useful feature for user to come back to the question which he skiped becouse only one is visible at a time.

I tried do this by myself but I've just started to learn jQuery and... I give up. Perhaps this is a job for mighty AJAX?

Answer 1

Didn't error check this at all, but here's how I'd do it! I'm sure you can optimize it for your actual application

function validateGroup( groupID )
   {
   var valid = 0;
   var $group = $('#' + groupID)

   $group.find(':checkbox').each( function() {
      if ($(this).is(':checked')
         {
         valid = 1;
         }
      });

   if (!valid)
      {
      $group.addClass("NotValid");
      }
   }

Answer 2

It is pretty simple to accomplish this with the following steps:

1. Register an event for click on all checkbox.
2. On each click count how many checkbox were checked in group.
3. Then take an action base on the number of checked checkboxes.

The JavaScript code looks like this, which can be optimized .

$('.accordion-group :checkbox').click(function() {
    var $this = $(this);
    var $group = $this.parents('.accordion-group:first');
    var $checkboxes = $group.find(':checkbox');
    var checks = 0;
    $checkboxes.each(function() {
        if ($(this).is(':checked')) {
            checks++;
        }
    });
    console.log(checks);

    var $heading = $group.find('.accordion-heading');

    if (checks === 0)
        $heading.removeClass('not-empty').addClass('empty');
    else
        $heading.removeClass('empty').addClass('not-empty');
});​

I made a demo at jsfiddle: http://jsfiddle.net/W2XD2/

---

EDITS

I optimized the script to be more specific, and optimize it:

$('.accordion-group :checkbox').click(function() {
    var $group = $(this).parents('.accordion-group:first');
    var checks = $group.find(':checked').length;    
    var $heading = $group.find('.accordion-heading');

    if (checks === 0)
        $heading.removeClass('not-empty').addClass('empty');
    else
        $heading.removeClass('empty').addClass('not-empty');
});​

You can check the updated revision at jsfiddle: http://jsfiddle.net/W2XD2/1/

Answer 3

I am not sure how you want to trigger the event.

If you want to do the checking on save or on clicking the next accordion heading you might want to do this:

    $(".b_save").click(function() {  
//change the above to $(".accordion-heading") if that is what you trigger the event with
     $.each($(".accordion-group"), function() {
      cls = $(this).find(":checked").length? "#00b5f8":"#ff0000";
      $(this).find(".accordion-heading").css("background-color", cls);
      })
    })

If you want to change the color when you click on the checkbox this is the code:

$(function(){
    $("input:checkbox").click(function(){
      parentEl = $(this).closest(".accordion-group");
      cls = $(parentEl).find(":checked").length?"#00b5f8":"#ff0000";
      $(parentEl).find(".accordion-heading").css("background-color", cls);
     })


})