Calling The Same Function When Any Radio Button Or Checkbox Are Clicked

I have some radio button and checkboxs like

Solution 1:

Since you may have other input elements in the page, just use a class name to identify them. In my example, I used the class name calc so you can use it to define an on change event.

<script type="text/javascript">

function calcPrice(){
    console.log('checked!!'); // note that you missed the quotes here
}
</script>

<input class="calc" type="radio" name="android" value="1">smart
<input class="calc" type="radio" name="android" value="2">tablet
<input class="calc" type="radio" name="android" value="3">both

<input class="calc" type=checkbox name="func" value="0">push
<input class="calc" type=checkbox name="func" value="0">distribute
<input class="calc" type=checkbox name="func" value="0">internationalization

For your JavaScript:

$("input.calc").change(function() {
    calcPrice();
});

Solution 2:

But I would like to call the same function when 'any' button are clicked.

You can use Multiple Selector (“selector1, selector2, selectorN”) and add :button selector in existing selector.

$("input[name='android'], input[name='func'], :button").change(function()

An equivalent selector to $( ":button" ) using valid CSS is $( "button, input[type='button']" ).

Solution 3:

Try this,

    $("input[name='android'], input[name='func']").change(function(){

    });

Solution 4:

you can use this

function calcPrice(){
    console.log("checked!!");
}

$("input[name='android'],input[name='func']").change(function()
{
    calcPrice()  ;                               
});

Share