Question

我正在尝试使用每个面板中的复选框创建一个spry手风琴菜单。该小组直接涉及许多大学学分。单击该复选框以及其他多个单击的复选框时，应在页面末尾显示总和 - 转移信用总数。

这是我到目前为止（现场）的网站：http://webfro.gs/south/toc/

在这个jsfiddle上，你可以看到我最终要做的事情...... http://jsfiddle.net/jlnewnam/dC8T2/

以下是HTML：

<div id="course_id">
    <input type="checkbox" value="3" />&nbsp; ASP100<br/>
    <input type="checkbox" value="4" />&nbsp; COM104<br/>
    <input type="checkbox" value="1" />&nbsp; ECO202<br/>
    <input type="checkbox" value="3" />&nbsp; MAT111<br/>
</div>
<br />
<br />
Total Potential Transfer Credits: <div id='total_potential'></div>

以下是JavaScript：

jQuery(document).ready(function($) {
    var sum = 0;
    $('#course_id :checkbox').click(function() {
        sum = 0;
        $('#course_id :checkbox:checked').each(function(idx, elm) {
            sum += parseInt(elm.value, 10);
        });

        $('#total_potential').html(sum);

    });

});

您会注意到，当您单击每个复选框时，总分数总和会增加。

我似乎无法在spry菜单中将其拉下来。我想这是因为每个小组都有自己的ID，我无法弄清楚我需要实现目标的分离。

问候，

KT

Answer 1

很好的一个....

这应该适用于您的标记。

$(function($) {
    var sum = 0;
    $('#CourseMenu :checkbox').click(function() {
        sum = 0;
        $('#CourseMenu :checkbox:checked').each(function(idx, elm) {
            sum += parseInt(elm.value, 10);
        });

        $('#total_potential').html(sum);
    });
});

你只需要正确的选民

Answer 2

您的代码应为：

jQuery(document).ready(function($) {
    $('#CourseMenu input[type=checkbox]').change(function() {
        var sum = 0;
        $('#CourseMenu input[type=checkbox]:checked').each(function(idx, elm) {
            if( $(elm).val() && !isNaN( parseInt( $(elm).val() ) ) ) {
                sum += parseInt( $(elm).val() );
            }
        });
        $('#total_potential').html(sum);
    });
}(jQuery));

首先，您为checkbox选择了错误的选择器。其次，我更喜欢使用change事件。它也应该与click一起使用，但从逻辑上讲，我认为change在这种情况下是正确的。另外，我添加了不同的方式来阅读value（因为你已经包含了jQuery）。

我通过粘贴到你的网站（不是jsfiddle）的JS控制台来检查它，所以它已经过测试，并且有效。

使用jsfiddle的代码：

jQuery(document).ready(function($) {
    $('#course_id input[type=checkbox]').change(function() {
        var sum = 0;
        $('#course_id input[type=checkbox]:checked').each(function(idx, elm) {
            if( $(elm).val() && !isNaN( parseInt( $(elm).val() ) ) ) {
                sum += parseInt( $(elm).val() );
            }
        });
        $('#total_potential').html(sum);
    });
}(jQuery));

此外，我不知道这是如何工作的：$('#CourseMenu :checkbox')作为您网站上的id容器和jsfiddle中的容器是不同的。你的jsfiddle中没有#CourseMenu元素......

你可以通过在jsfiddle中粘贴这些行来简单地检查它：

alert('Proper fiddle selector: ' + $('#course_id input[type=checkbox]').length);
alert('Wrong fiddle selector: ' + $('#CourseMenu :checkbox').length);

正如您将看到第二个选择器不会返回任何复选框...

将多个复选框的值一起添加;最后显示一笔金额......

2 个答案: