Question

I have done 7 check boxes and code them to only one should be checked, and here is the code:

        $j(document).ready(function(){
        $j(':checkbox').bind('change', function() {
            var thisClass = $j(this).attr('class');
            if ($j(this).attr('checked')) {
                $j(':checkbox.' + thisClass + ":not(#" + this.id + ")").removeAttr('checked');
            }
            else {
                $j(this).attr('checked', false);
                $j('.first-image').show();
                $j('.hide-onload').hide();
            }
        });
    });

and I had to create another 2 check boxes in the same page to choose between "yes" or "no" and they have another class

everything is fine except when I check the "Yes" "No" boxes it should not uncheck the first checked box because it is in different class.

The question is: How to make the code I have attach to work only with the class of the first 7 check boxes and make another one for the "Yes" "No" check boxes.

I hope I was clear enough, and here is the page link I am working on it that explains the problem http://www.cabas-durables.fr/magento/index.php/custom-contact/

Thank you in advance ....


Was it helpful?

Solution

You can separate your responsabilities with two additional classes:

$j('.normal-checkboxes:checkbox').bind(...);
$j('.yes-no:checkbox').bind(...);

And then wrap your checkboxes like this:

<div class="normal-checkboxes">
    <input type="checkbox">
    <input type="checkbox">
</div>

<div class="yes-no">
    <input type="checkbox">
    <input type="checkbox">
</div>

EDIT:

$j(document).ready(function(){
    // When clicking a .normal-checkboxes..
    $j('.normal-checkboxes:checkbox').bind('click', function() {
        // Remove the property checked for all normal-checkboxes
        $('.normal-checkboxes:checkbox').prop('checked', false);
        // Add the property checked to the clicked one
        $(this).prop('checked', true);
    });
});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top