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?

Tip: Store the result of $(this) in a temporary variable to avoid repeated calls to jQuery: var $this = $(this); — David Harkness
– David Harkness, Commented Apr 16, 2013 at 23:27

Flambino · Accepted Answer · 2013-04-16 21:51:38Z

5

Here are 3 - there are more, no doubt

Give both checkboxes a class and use that as the selector
```
$(".someClass").click( ... )
```

Declare the event handler elsewhere, and use it anywhere:

function checkboxClick(event) {...};  

$subparentCheckbox.click(checkboxClick);  
$childCheckbox.click(checkboxClick);

Use .add to combine the two checkboxes into one collection before calling .click like so
```
$subparentCheckbox.add($childCheckbox).click(...)`
```

edited Apr 16, 2013 at 21:51

answered Feb 21, 2013 at 19:34

Flambino

33.3k2 gold badges46 silver badges90 bronze badges

\$\begingroup\$ You can call the .on() method straight away, since if you look in jQuery source, .click() refers right back to .on() anyways. \$\endgroup\$

Jonny Sooter
– Jonny Sooter

2013-02-22 17:04:19 +00:00
Commented Feb 22, 2013 at 17:04
1

\$\begingroup\$ @JonnySooter True. I actually prefer using .on() in my own code even when there are aliasses like .click(). Keeps the code consistent. \$\endgroup\$

Flambino
– Flambino

2013-02-22 17:53:55 +00:00
Commented Feb 22, 2013 at 17:53

Add a comment |

Stack Exchange Network

Two click functions doing the same thing with difference the selector

1 Answer 1

You must log in to answer this question.

Linked

Hot Network Questions

Two click functions doing the same thing with difference the selector

1 Answer 1

You must log in to answer this question.

Linked

Related

Hot Network Questions