如何解决jQuery复选框价格更新函数不触发问题及多事件绑定？

一、修复复选框事件不触发的问题 #

你的代码存在几个关键错误，导致事件无法正常触发：

1. 事件绑定选择器错误
   你用了$('input[type=checkbox]:checked')，这个选择器只会选中已经被勾选的复选框，未勾选的复选框根本没绑定事件。应该去掉:checked，改为绑定所有复选框：

$('input[type=checkbox]').on('change', function() {
  // 处理逻辑
});

2. ID选择器缺少#前缀
   $('checkbox1')这种写法是查找标签名为checkbox1的元素，而非id为checkbox1的元素，必须加上#前缀：

if ($('#checkbox1').prop("checked")) {
    total += 250; // 注意你代码里写的是100，但HTML标注的是250€，建议统一价格数值
}
if ($('#checkbox2').prop("checked")) {
    total += 50;
}
if ($('#checkbox3').prop("checked")) {
    total += ...; // 填入该复选框对应的实际价格
}

3. 结果元素的文本更新问题
   你的HTML中result是包含<p>的div，直接给div设置innerText会覆盖掉内部的<p>标签，建议直接选中<p>元素进行更新：

var $result = $('#result p');
$result.text('Result: ' + total + '€');

修复后的完整代码示例：

$('input[type=checkbox]').on('change', function() {
    console.log("Hi");
    var total = 0;
    var $result = $('#result p');

    if ($('#checkbox1').prop("checked")) {
        total += 250;
    }
    if ($('#checkbox2').prop("checked")) {
        total += 50;
    }
    if ($('#checkbox3').prop("checked")) {
        total += 100; // 填入对应价格
    }

    $result.text('Result: ' + total + '€');
});

二、多个事件触发同一个处理函数的写法 #

你设想的写法不正确，正确实现方式有两种：

方式1：合并选择器与事件类型 #

先把计算总价的逻辑抽成独立函数，再同时给多个元素绑定事件：

// 抽离处理函数
function calculateTotal() {
    var total = 0;
    var $result = $('#result p');

    // 复选框价格计算
    if ($('#checkbox1').prop("checked")) total += 250;
    if ($('#checkbox2').prop("checked")) total += 50;
    if ($('#checkbox3').prop("checked")) total += 100;

    // number输入框逻辑（假设#num是输入框id）
    var numVal = $('#num').val();
    if (!isNaN(numVal) && numVal !== '') {
        total += parseInt(numVal); // 根据你的需求调整计算规则
    }

    $result.text('Result: ' + total + '€');
}

// 给复选框绑定change事件，给number输入框绑定keyup+change事件（覆盖手动输入和箭头调整的场景）
$('input[type=checkbox], #num').on('change keyup', calculateTotal);

方式2：分别绑定同一个函数 #

如果需要给不同元素绑定不同事件，也可以分开写：

$('input[type=checkbox]').on('change', calculateTotal);
$('#num').on('keyup change', calculateTotal);

这样无论是复选框勾选/取消，还是number输入框输入/调整数字，都会触发同一个总价计算函数。

内容的提问来源于stack exchange，提问作者Tatiana Sánchez