0

i need to recalculate a total price for each change on the page. Select menus and checkboxes. For select menus i use

  $('select').on('change', function() {
        calculatePrice();
    });

but now i need something similar for

  $('input checkbox').on('change', function() {
        calculatePrice();
    });

doesn't work.

1
  • What exactly is the problem you are facing? Are you not able to target the element? Or are you not seeing the event fired?
    – Lix
    Nov 18, 2014 at 11:32

4 Answers 4

2

use

$('input[type=checkbox]').on('change', function() {
    calculatePrice();
});
3
  • 2
    There is a build-in selector to match checkbox types: input:checkbox.
    – Lix
    Nov 18, 2014 at 11:39
  • @Lix of course. There are many different ways to do the same. So this is just one possible way
    – Panoptik
    Nov 18, 2014 at 11:40
  • 1
    You are correct. However, of the possible ways, this method simply contains extra (unneeded) characters which harms the readability of the code.
    – Lix
    Nov 18, 2014 at 11:41
2

Separate selectors with a comma:

$('select, :checkbox').on('change', function() {
    calculatePrice();
});

or simply use $(':input') which would also include text inputs, textareas, radio buttons. Don't know if you need them though.

2

You can use the exact same logic (even the same function) for this:

$('select, input:checkbox').on('change', function() {
  calculatePrice();
});

What I've done here is setup a multiple selector for the same callback: 'select, input:checkbox'. This selector will target any <select> and also any <input type="checkbox" /> elements. When either triggers a change event, the calculatePrice() function will be called.

I would also recommend that you give some identification properties to your elements, for example a class value such as triggers_calculate. Then your selector will have improved readability and would look something like this:

$('.triggers_calculate')

The selector will match only elements with the triggers_calculate class and when they fire the change event the function will be called.

2
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.9.1.js"></script>
    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body id="contextmenu">
    <form>
        <table border width="100%">
            <tr>
                <td>Student</td>
                <td>
                    <select name="stu" id="Student">
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                    </select>
                </td>
            </tr>

            <tr>
                <td>House Type</td>
                <td>
                    <input type="checkbox" name="accom" value="100" id="a1">
                    <label for="a1">Hotel</label>
                    <input type="checkbox" name="accom" value="0" id="a2">
                    <label for="a2">House</label>
                </td>
            </tr>

        </table>
    </form>
    <script>
        $('select, input:checkbox').on('change', function () {
            calculatePrice();
        });
    </script>
</body>
</html>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.