0

我正在尝试在每个面板中创建一个带有复选框的 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);

    });

});

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

我似乎无法在快速菜单中完成此操作。我想这是因为每个面板都有自己的 ID，我无法弄清楚实现目标所需的分隔。

问候，

韩国电信

4

2 回答 2

2

好简单的一个......

这应该适用于您的标记。

$(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);
    });
});

您只需要正确的选择器

于 2013-05-15T23:59:16.190 回答
1

您的代码应该是：

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

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

使用 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 中的容器是不同的。#CourseMenu你的jsfiddle中没有元素......

您可以通过在 jsfiddle 中粘贴以下行来简单地检查它：

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

如您所见，第二个选择器不会返回任何复选框...

于 2013-05-15T23:51:53.203 回答