Question

我有很多具有不同特征的项目，需要显示所选项目的特征总和。

*示例

Item-1: mass - 1 kg / cost - 1$ (selected)
Item-2: mass - 3 kg / cost - 5$ (selected)

—摘要：质量-4公斤/成本-6 $

我的代码的主要问题是...当我单击复选框时-sum起作用了，但是当我尝试通过单击div来选择所有复选框时却没有。

Simplified Demo...（要点是：要计算总和，请单击div）

•HTML：

<div class="SELECTOR-DIV" style="width: 100px; height: 100px; border: 1px solid red;">
    <input type="checkbox" id="BUBU-1" value="250"> 
    <input type="checkbox" id="BUBU-2" value="750" > 
    <input type="checkbox" id="BUBU-3" value="500"> 
</div>

— <input id="SUM" style="border: none;">

•JavaScript：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.js"></script>

<script type="text/javascript">
    $(document).ready( function() {
        $('#BUBU-1, #BUBU-2, #BUBU-3').change( function() {
             var BOBY1 = Number( $('#BUBU-1:checked').val()||0);
             var BOBY2 = Number( $('#BUBU-2:checked').val()||0);
             var BOBY3 = Number( $('#BUBU-3:checked').val()||0);
             $('#SUM').val( BOBY1 + BOBY2 + BOBY3 );
        });
     });
</script>

<script>
   $('.SELECTOR-DIV').click(function (){
       var checkbox = $(this).find('input[type=checkbox]');
       checkbox.prop("checked", !checkbox.prop("checked"));
       });
   $('input[type=checkbox]').click(function (e){
       e.stopPropagation();
       return true;
       });
</script>

Answer 1

更改prop.checked值不一定会引发onChange事件。您必须使用jQuery的.change（）方法手动触发该事件。 https://api.jquery.com/change/

Answer 2

尝试一下：

   $(document).ready( function() {
      $('#BUBU-1, #BUBU-2, #BUBU-3').change( function() {
           var BOBY1 = Number( $('#BUBU-1:checked').val()||0);
           var BOBY2 = Number( $('#BUBU-2:checked').val()||0);
           var BOBY3 = Number( $('#BUBU-3:checked').val()||0);
           $('#SUM').val( BOBY1 + BOBY2 + BOBY3 );
      });
   });



 $('.SELECTOR').click(function (){
     var checkbox = $(this).find('input[type=checkbox]');
     checkbox.prop("checked", !checkbox.prop("checked")).trigger('change');
     });
 $('input[type=checkbox]').click(function (e){
     e.stopPropagation();
     return true;
     });

通过单击div选中复选框-与其他功能不兼容

2 个答案: