将所选列表的值推送到数组中并计算

Question

这是我现在的代码。我只想推送或推送数组中选定的所有对象。

$('.checkbox-wrapper').delegate('input:checkbox', 'change', function () {
    //Use this is if you want to uncheck other checkbox if another checkbox is checked 
    //$('input').not(this).prop('checked', false); 
    var $lis = $('.list > li').hide();
    $('input:checked').each(function () {
        $lis.filter('#' + $(this).attr('data-stats')).show();
    });

    console.log($lis.filter('#' + $(this).attr('data-stats')));

    var myVals = [];
    $lis.filter('#' + $(this).attr('data-stats')).map(function () {
        myVals.push($(this).attr('value'));
    });
    var arr = myVals,
        total = 0;
    $.each(arr, function () {
        total += this;

    });
    $("#total").text(total);
    console.log(total)
}).find('input:checkbox').change();

My JS Fiddle

Answer 1

你做错了：

$.each(arr,function(i) {
  total += arr[i];
});

Fiddle: http://jsfiddle.net/y9xx8qzv/

Answer 2

As of jQuery 1.7, .delegate() has been superseded by the .on() method. For earlier versions, however, it remains the most effective means to use event delegation. More information on event binding and delegation is in the .on() method.

所以我把delegate改成了on

Html id should be unique

所以我把你的li id改成了class

然后你可以试试：

$('.checkbox-wrapper').on('change', 'input:checkbox', function(){
   var $lis = $('.list > li');
   if ($(this).is(':checked')) {
       $lis.filter('.' + $(this).data('stats')).show();       
   } else {
       $lis.filter('.' + $(this).data('stats')).hide();
   }
   var myVals = [];
   $lis.filter(':visible').map(function(){
      myVals.push($(this).attr('value'));
   });
   var arr = myVals,
   total = 0;
   $.each(arr,function(i) {
       total += arr[i];       
   });
   $("#total").text(total);   
}).find('input:checkbox').change();

$('.list > li').hide();

这是DEMO

还有一个simple demo

Answer 3

ID 应该是 unique()，使用 data-id 属性而不是 id

HTML

<ul class="list">
    <li data-id="isActive" value="10">Item One : 10</li>
    <li data-id="isActive" value="20">Item Two : 20</li>
    <li data-id="isActive" value="30">Item three : 30</li>
    <li data-id="isnotActive" value="40">Item Four : 40</li>
    <li data-id="isnotActive" value="50">Item Five : 50</li>
</ul>

JS

var total = 0;
    $('input:checked').each(function () {
        $("[data-id=" + $(this).attr('data-stats') + "]").each(function () {
            $(this).show();
            total += +$(this).attr("value");
        });
    });

Fiddle

将所选列表的值推送到数组中并计算

Push a Value of the Selected List in an Array and Calculate

javascript

jquery

event-handling

Fiddle: http://jsfiddle.net/y9xx8qzv/