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

【问题标题】：Trigger a function for when checkbox is checked/unchecke?选中/取消选中复选框时触发功能？
【发布时间】：2015-01-15 13:50:40
【问题描述】：

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

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

但现在我需要类似的东西

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

没用。

【问题讨论】：

您面临的具体问题是什么？你不能定位元素吗？还是您没有看到事件被触发？

标签： javascript select checkbox

【解决方案1】：

使用

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

【讨论】：

有一个内置选择器来匹配复选框类型：input:checkbox.
@Lix 当然。有许多不同的方法可以做到这一点。所以这只是一种可能的方式
你是对的。但是，在可能的方法中，这种方法只是包含额外的（不需要的）字符，这会损害代码的可读性。

【解决方案2】：

您可以为此使用完全相同的逻辑（甚至是相同的函数）：

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

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

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

$('.triggers_calculate')

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

【讨论】：

【解决方案3】：

用逗号分隔选择器：

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

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

【讨论】：

【解决方案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>

【讨论】：