Question

我需要重新计算网页上每次更改的总价。选择菜单和复选框。对于选择菜单，我使用

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

但现在我需要类似的东西

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

不起作用。

Answer 1

使用

$('input[type=checkbox]').on('change', function() {
    calculatePrice();
});

Answer 2

您可以使用完全相同的逻辑（甚至相同的功能）：

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

我在此处所做的是针对同一回调设置multiple selector：'select, input:checkbox'。此选择器将定位任何 <select>以及任何 <input type="checkbox" />元素。当触发更改事件时，将调用calculatePrice()函数。

我还建议您为元素提供一些标识属性，例如triggers_calculate等类值。然后你的选择器将具有更高的可读性，看起来像这样：

$('.triggers_calculate')

选择器只匹配具有triggers_calculate类的元素，当它们触发change事件时，将调用该函数。

Answer 3

用逗号分隔选择器：

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

或简单地使用$(':input')，其中还包括文本输入，textareas，单选按钮。不知道你是否需要它们。

Answer 4

<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>

选中/取消选中复选框时触发功能？

4 个答案: