Question

＆＃13;

$('#checkboxF1').on('change', function() {
  alert("test");
});

function check_box() {
  document.getElementById("checkboxF1").checked = true;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="check_box" onclick="check_box();">check box</button>
<br>
<br>
<input type="checkbox" id="checkboxF1" class="css-checkbox">Test

＆＃13;

onchange函数在直接选中复选框时有效，但在通过函数检查复选框时它不起作用，即名为check_box()的函数。

我想通过函数check_box()检查复选框时调用onchange函数。

Answer 1

这对input代码来说是正常的。以编程方式更改值时，不会触发更改事件。这就是它们的设计方式。

通常的解决方法是直接调用更改函数或在以编程方式更改值时手动触发更改事件。

Answer 2

试试这个 -

//创建一个新的'更改'事件

var event = new Event（'change'）;

//发送

element.dispatchEvent（事件）;

请告诉我这是否有帮助...

Answer 3

问题是更改复选框状态不会触发事件。尝试触发器。

var chk = $('#checkboxF1');

chk.on('change', function() {
  alert("test");
});

function check_box() {
  chk.trigger('click');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<button id="check_box" onclick="check_box();">check box</button>
<br>
<br>
<input type="checkbox" id="checkboxF1" class="css-checkbox">Test

Answer 4

见下面的代码。

$('#checkboxF1').on('change', function() {
  alert("test");
});

function check_box() {
  // emulate the checkbox.
  var checkboxF1 = document.getElementById("checkboxF1");
  checkboxF1.checked = !checkboxF1.checked;
  // trigger the onChange event.
  $('#checkboxF1').trigger('change');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="check_box" onclick="check_box();">check box</button>
<br>
<br>
<input type="checkbox" id="checkboxF1" class="css-checkbox">Test

Answer 5

由于你正在使用jQuery，试试这个：

function check_box(){
    $("#checkboxF1").prop('checked', true);
}

编辑：我把你的功能放在一个片段中，它也可以正常工作。它会检查框。

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html>
    <head>
        <title>Test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    </head>
    <body>

    <button id="check_box" onclick="check_box();"> check box </button>
    <br> <br>
    <input type="checkbox" id="checkboxF1" class="css-checkbox"> Test

    <script>
    $('#checkboxF1').on('change', function() {
  alert("test"); 
});

    function check_box(){
        document.getElementById("checkboxF1").checked = true;   
    }

    </script>

    </body>
    </html>

＆＃13;

如果您尝试使用按钮切换复选框。然后这样做：

function check_box(){
    $("#checkboxF1").prop('checked', !$("#checkboxF1").prop('checked'));
}

如果不是这样，那我就不明白这个问题。

编辑2：好的，如果onchange事件没有发生;试着强迫它。

$('#checkboxF1').trigger('change');

Javascript函数无法取消选中复选框

5 个答案: