CODEWITHSUNDEEP
javascriptjquerycheckbox
MikeOscarEcho
MikeOscarEcho

Reputation: 548

Check a checkbox which checks another checkbox

So here is what my form looks like.

http://jsfiddle.net/jFN5T/5/

and the JS I tried:

$('#work_direction').on('click' , function() {

    $('.cad, .design, .shop, .cnc').on('click', function(){

        $classname = $(this).attr('class');
        if($('.' + $classname + ":checked").length > 0){
            $('#' + $classname).attr('checked','checked');
        } else {
            $('#' + $classname).removeAttr('checked');
        }
    });

});

Theres some functionality there and it works as far as I know. However, I want to make it so that when "Mexico" is chosen in Direction, when user checks off S - SHOP or M - CNC, it shouldn't check off these two in Departments Affected

but instead it should check off

The form should work the way it does for both Domestic and Offshore, in that when the bottom C, D, S, M get checked off then the top CAD, Design, Shop, CNC, get checked off. The functionality changes like described above when user chooses "Mexico" as direction.

Here is the code I tried, Check and uncheck checkbox not working correctly but I had issues described in beautifulcoder's comment: "Basically, I think you are running into issues with event bubbling. If you use live(), jQuery will add the event now and in the future. The next time you add an event it gets appended to the list."

I'm not sure how to implement a fix or whether there is a better approach.

Upvotes: 0

Views: 94

Answers (2)

Nate Kibler
Nate Kibler

Reputation: 652

Although there may be an underlying issue with event bubbling (since you are adding a new onClick() function every time the dropdown is clicked), I believe you are attacking the problem wrong. Look at your code:

$classname = $(this).attr('class');
if($('.' + $classname + ":checked").length > 0){
    $('#' + $classname).attr('checked','checked');
} else {
    $('#' + $classname).removeAttr('checked');
}

This portion grabs the current element's class name and checks to see if it is checked. It then finds the element whose ID matches its own class name and either checks or un-checks it. In your example, the element whose ID is mexico will never be selected unless your CNC checkbox has a class name of mexico. Also, nowhere in your code are you changing these class names when the dropdown select box's value changes.

I would suggest that if you can use HTML5, use the data feature it provides. This would allow you to specify which elements should be checked without conflicting or improper IDs/class names.

Here's an example of it in action: JSFiddle

The jQuery in the example:

$('#work_direction').on('change', function() {
    if ($(this).val() == 'mexico') {
        $('.shop, .cnc').data('check', 'mexico');
    }
    else {
        $('.shop').data('check', 'shop');
        $('.cnc').data('check', 'cnc');
    }
});

$('.cad, .design, .shop, .cnc').on('change', function() {
    // Split into space-delimited array in case we want
    // to check off more than one
    var elemsToCheck = $(this).data('check').split(' ');
    var checked = $(this).attr('checked');
    $.each(elemsToCheck, function() {
        $('#' + this).attr('checked', !!checked);
    });
});

My example also allows for multiple checkboxes to be specified in the data-check attribute. Just delimit each one by a space.

Upvotes: 1

haxxxton
haxxxton

Reputation: 6442

have a look at the change event coupled with the prop function like so 

$('#work_direction').on('change' , function() {
    var direction = $(this).val();
    $('#'+direction).prop('checked', true);
});

http://jsfiddle.net/jFN5T/7/

Upvotes: 0

Related Questions