将相同的事件处理程序添加到单选按钮和复选框答案

【问题标题】：Add the same event handler to radio buttons and checkboxes将相同的事件处理程序添加到单选按钮和复选框
【发布时间】：2017-07-09 12:25:05
【问题描述】：

我试图让一个函数添加所选复选框和单选按钮的值。我创建了一个函数，可以添加复选框的值和单选按钮的函数，但是在将两者组合成一个工作函数时遇到了麻烦。我认为我的问题是与 .click() 相关联的单选和复选框元素

我的代码可以在这里看到： https://jsfiddle.net/Buleria28/nz43u7x8/2/

HTML 是：

<input type="checkbox" value="1" />test 1<br/>
<input type="checkbox" value="2" />test 2<br/>
<input type="checkbox" value="3" />test 3<br/>

<input type="radio" name="test" value="1" />test 4
<input type="radio" name="test" value="2" />test 5
<div id='sum'></div>

jQuery 是：

jQuery(document).ready(function($) {
var sum = 0;

$("input:checkbox"),$("input:radio").click(function() {
   sum = 0;
    $("input:checkbox:checked").each(function(idx, elm) {
        sum += parseInt(elm.value, 10);
    });

   sum = 0;
    $("input:radio:checked").each(function(idx, elm) {
        sum += parseInt(elm.value, 10);
    });
    $('#sum').html(sum);
  });
});

【问题讨论】：

标签： javascript jquery checkbox radio-button

【解决方案1】：

您实际上是在使用 comma operator 并且只将事件处理程序添加到第二个 jQuery 对象。而是通过在 jQuery 构造函数的第一个参数中使用逗号来组合实际的选择器，类似于 CSS 选择器：

$("input:checkbox, input:radio").click(function() {
  …
});

【讨论】：

【解决方案2】：

这里有解决方案https://jsfiddle.net/nz43u7x8/5/

jQuery(document).ready(function($) {
    var sum = 0;

    $("input:checkbox, input:radio").click(function() {
        sum = 0;
        $("input:checkbox:checked").each(function(idx, elm) {
            sum += parseInt(elm.value, 10);
        });

        $("input:radio:checked").each(function(idx, elm) {
            sum += parseInt(elm.value, 10);
        });
        $('#sum').html(sum);
    });
});

【讨论】：