CODEWITHSUNDEEP
javascriptjquerycheckboxjquery-eventsverification
krifur
krifur

Reputation: 890

Optimize jQuery small script for checkboxes

I made a small verification script which is supposed to act like this: I have 4 checkboxes, one has a particular way of action, the id of this checkbox is chx0

Here is my code:

<script type="text/javascript"> 
    
    $(document).ready(function() {
        $('#chx0').click(function() { // click on the chx0 checkbox
           
            if ($('#chx0').attr('checked')) {
                
                $('#chx1').attr('checked', false);
                $('#chx2').attr('checked', false);
                $('#chx3').attr('checked', false);
            }
        });
    
        $('#chx1').click(function() {// click on the chx1 checkbox
           
            if ($('#chx1').attr('checked')) {
                $('#chx0').attr('checked', false);
            }
        });
    
        $('#chx2').click(function() { // click on the chx2 checkbox
           
            if ($('#chx2').attr('checked')) {
                $('#chx0').attr('checked', false);
            }
        });
    
        $('#chx3').click(function() { // click on the chx3 checkbox
           
            if ($('#chx3').attr('checked')) {
                $('#chx0').attr('checked', false);
            }
        });

    });
    
</script>

This code is working pretty well it just to get more good practice!

Upvotes: 0

Views: 193

Answers (3)

RSG
RSG

Reputation: 7123

I came up with something similar to ianbarker. Rather than assume dependencies are all or nothing I used a custom data tag to list the dependencies.

A working example is on jsfiddle here

$('.luckyChecks').click(function() { // click on ANY lucky checkbox
    var $t = $(this);
    if($t.attr('checked')){
        var clear = $t.attr("data-clear").split(",");
        for(var i=0; i < clear.length; i++){
            $('#'+clear[i]).attr('checked',false);
        }
    }
});

HTML:

<input type="checkbox" id="chx0" class="luckyChecks" data-clear="chx1,chx2,chx3" /> 
Diamonds <br />
<input type="checkbox" id="chx1" class="luckyChecks" data-clear="chx0"/> 
Clovers <br />
...

Upvotes: 1

ianbarker
ianbarker

Reputation: 1254

I'd put a class on each checkbox 

<input type="checkbox" name="chx0" id="chx0" class="checkbox-group singleton">
<label for="chx0">Check me out!</label>
<input type="checkbox" name="chx1" id="chx1" class="checkbox-group">
<label for="chx1">Check us out!</label>
<input type="checkbox" name="chx2" id="chx2" class="checkbox-group">
<label for="chx2">Check them out!</label>

Then with your jQuery you can do

$('input.checkbox-group').each( function() {
    $(this).click( function() {
        if ( $(this).hasClass('singleton') ) {
            $('input.checkbox-group:checked').removeAttr('checked');
        } else {
            $('input.checkbox-group.singleton').removeAttr('checked');
        }
    };   
});

Untested, but I think something like that should work. I can't remember if it's better to use the change event rather than click.

Upvotes: 5

rajasaur
rajasaur

Reputation: 5460

You could combine the clauses for all the individual checkboxes, something like

$('#chx1','#chx2','#chx3').click(function() {
    if ($(this).attr('checked')) {
        $('#chx0').attr('checked', false);
    }
});

instead of one per checkbox. Also in the one for "chx0", you can use $(this) instead of $('#chx0')

Upvotes: 3

Related Questions