使用 jQuery 的 prop() 单击复选框未运行在复选框上设置的 onClick() 函数

Question

我有两个复选框，它们分配了一个 onclick() 函数。现在在一个按钮中，我设置了 jquery，以便通过 prop() 自动检查复选框

按下按钮时，复选框被选中，但 onclick() 函数不起作用。我如何使它工作？有什么想法吗？

html:

    <div class="container">
        <h2 class="mt-5">Tester</h2>
        <form>
            <div class="form-group row align-items-center">
            <div class="col-3">
                <label for="policyinInt">Int</label>
                <input class="form-control" value="0" readonly="readonly" type="text" name="total" />
            </div>
            <div class="col-3">
                <label for="policyinHex">Hex</label>
                <input class="form-control" value="0" readonly="readonly" type="text" name="totalhex" id="policyinHex" />
            </div>
            </div>
        </form>
        <input class="form-check-input" name="values" value="256" type="checkbox" onclick="totalIt()" id="bit8" /> <span class="code">0x00000100</span><br>
        <input class="form-check-input" name="values" value="512" type="checkbox" onclick="totalIt()" id="bit9" /> <span class="code">0x00000200</span> <br>
    <button type="button" class="default btn btn-outline-primary">Check the boxes</button>
    <br>
    </div>

javascript：

function totalIt() {
    var input = document.getElementsByName("values");
    var total = 0;
    for (var i = 0; i < input.length; i++) {
      if (input[i].checked) {
        total += parseInt(input[i].value);
      }
    }
    document.getElementsByName("total")[0].value = total;
    document.getElementsByName("totalhex")[0].value = decimalToHexString(total);
  }


  function decimalToHexString(number)
  {
    number = number.toString(16).toUpperCase()
    number = "0x"+number;
    return number;
  }

$(document).ready(function(){
    $(".default").click(function(){
        $("#bit8").prop("checked", true);
        $("#bit9").prop("checked", true);
    });
});

到目前为止我所拥有的 jsfiddle：https://jsfiddle.net/fahims/7eyf5v86/

因此，当手动选中复选框时，该功能正在运行。但是当按钮用于触发复选框时，功能不起作用。有没有更好的方法来做我想要实现的目标？

Answer 1

设置选中的属性后，只需调用totalIt()。以编程方式设置属性或值不会触发用户事件

$(".default").click(function(){
    $("#bit8, #bit9").prop("checked", true);
    totalIt();
});