Two click functions doing the same thing with difference the selector

Question

I have the following jQuery click functions:

$childCheckbox.click(function(){
    if(!$(this).hasClass('checked') && !$parentCheckbox.hasClass('checked')){
        $(this).attr('checked', 'checked').addClass('checked');
        $parentCheckbox.prop('indeterminate',true);     
    }
    else if($(this).hasClass('checked')){
        $(this).removeAttr('checked', 'checked').removeClass('checked');
        $parentCheckbox.prop('indeterminate',false);
    }
});

$subparentCheckbox.click(function(){
    if(!$(this).hasClass('checked') && !$parentCheckbox.hasClass('checked')){
        $(this).attr('checked', 'checked').addClass('checked');
        $parentCheckbox.prop('indeterminate',true);     
    }
    else if($(this).hasClass('checked')){
        $(this).removeAttr('checked', 'checked').removeClass('checked');
        $parentCheckbox.prop('indeterminate',false);
    }
});

As you can see both are exactly the same with the exception of the "selector". Is there a good way to combine these to minimize code?

Answer 1

Here are 3 - there are more, no doubt

1. Give both checkboxes a class and use that as the selector

   $(".someClass").click( ... )
   

2. Declare the event handler elsewhere, and use it anywhere:

   function checkboxClick(event) {...};  
   
   $subparentCheckbox.click(checkboxClick);  
   $childCheckbox.click(checkboxClick);
   

3. Use .add to combine the two checkboxes into one collection before calling .click like so

   $subparentCheckbox.add($childCheckbox).click(...)`