javascript - 通过单击 div 来选中复选框 - 不适用于其他功能

Question

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

*示例

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

—摘要:质量 - 4 千克/成本 - 6 美元

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

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/