Question

我有一个带onChange事件的复选框和一个选中并取消选中此复选框的按钮。我手动检查和取消选中时会触发该事件。但是，当我按下按钮以更改复选框的状态时，不会触发任何事件。

<input type="checkbox" id="1">
<input type="button" id="2" value="click">

按下按钮时，您是否有想要触发事件的想法。

问候

Answer 1

您需要在设置复选框的change状态后触发checked事件：

$(document).on("click","#2",function()
{
    if($("#1").is(":checked") == true)
    {
         $("#1").prop('checked', false).change(); // or .trigger('change')
    }
    else
    {
        $("#1").prop('checked', true).change(); // or .trigger('change')
    }
})

<强> Updated Fiddle

另请注意，id以数字开头是无效的HTML。您可以参考 here 获取更多信息

Answer 2

您可以使用$("#1").trigger("change")触发更改事件并切换点击prop("checked", !$("#1").prop("checked")。请尝试：

 $(document).on("click","#2",function()
 {
   $("#1").trigger("change").prop("checked", !$("#1").prop("checked"));
 });
 $(document).on("change","#1",function()
 {
  alert("changed")
 });

<强> Working Demo

Answer 3

只需添加trigger

即可

$(document).on("click","#2",function(){

    if($("#1").is(":checked") == true) { 
       $("#1").prop('checked', false); 
    } else {
       $("#1").prop('checked', true);
    }
    $('#1').trigger('change');
});

请参阅此FIDDLE

Answer 4

你可以点击点击：

$(document).on("click","#2",function()
{
    $('#1').click();
});
$(document).on("change","#1",function()
{
    alert("changed");
});

The demo.

Answer 5

更改属性值后触发事件：

$(document).on("click", "#2", function () {
    var checkboxEl = $('#1');
    checkboxEl.prop('checked', !checkboxEl.is(":checked")).change()
});

$(document).on("change", "#1", function () {
    alert("changed");
});

缓存jQuery对象也很好。

Answer 6

而不是做

 $("#1").prop('checked', false);

你可以这样做：

 $("#1").click();

JsFiddle：http://jsfiddle.net/hWhg3/

当元素被另一个元素更改时，onchange事件不起作用

6 个答案: