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

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/