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

使用 jQuery 的 prop() 来点击复选框并不是 运行 在复选框上设置的 onClick() 函数

Using jQuery's prop() to click on a checkbox isn't running the onClick() function set on the checkbox

html

javascript

jquery

button

使用 jQuery 的 prop() 来点击复选框并不是运行在复选框上设置的 onClick() 函数