Fatal编程技术网
  • javascript/
  • Javascript 是否在选中/取消选中复选框时触发函数？

Javascript 是否在选中/取消选中复选框时触发函数？

javascript select checkbox

Javascript 是否在选中/取消选中复选框时触发函数？,javascript,select,checkbox,Javascript,Select,Checkbox,我需要重新计算页面上每次更改的总价。选择菜单和复选框。对于我使用的选择菜单 $('select').on('change', function() { calculatePrice(); }); 但现在我需要一些类似的东西 $('input checkbox').on('change', function() { calculatePrice(); }); 不起作用。使用 $('input[type=checkbox]').on('ch

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

  $('select').on('change', function() {
        calculatePrice();
    });
但现在我需要一些类似的东西 
  $('input checkbox').on('change', function() {
        calculatePrice();
    });
不起作用。

使用

$('input[type=checkbox]').on('change', function() {
    calculatePrice();
});
您可以为此使用完全相同的逻辑（甚至相同的函数）：

$('select, input:checkbox').on('change', function() {
  calculatePrice();
});
我在这里所做的是为同一个回调设置：
“选择，输入：复选框”
。此选择器将针对任何
以及任何
元素。当其中一个触发更改事件时，将调用
calculatePrice（）
函数

我还建议您为元素提供一些标识属性，例如类值，如
触发器\u计算
。然后，您的选择器将具有更好的可读性，看起来如下所示：


$('.triggers_calculate')



选择器将只匹配具有
触发器\u calculate
类的元素，当它们触发
更改
事件时，将调用该函数。
用逗号分隔选择器：


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


或者只需使用
$（':input'）
，其中还包括文本输入、文本区域和单选按钮。但不知道您是否需要它们。


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


学生
1.
2.
3.
4.
5.
户型
酒店
房子
$（'select，input:checkbox'）。在（'change'，函数（）{
计算价格（）；
});

您面临的问题到底是什么？您是否无法以元素为目标？或者您没有看到触发的事件？有一个内置选择器来匹配复选框类型：
input:checkbox
@Lix当然。有许多不同的方法可以做到这一点。所以这只是一种可能的方式，你是正确的。但是，在可能的方法中，此方法只包含额外的（不需要的）字符，这会损害代码的可读性。