Question

我有一个代码：

HTML代码：

<div id='outside_div'>
    <div>
        <input type='checkbox' name='mycheckbox1'>
        <input type='checkbox' name='mycheckbox2'>
        <input type='checkbox' name='mycheckbox3'>
    </div>
    <div>
        <input type='checkbox' name='mycheckbox4'>
        <input type='checkbox' name='mycheckbox5'>
        <input type='checkbox' name='mycheckbox6'>
    </div>
</div>
<div id='another_div'>
    <div>
        <input type='checkbox' name='mycheckbox1'>
        <input type='checkbox' name='mycheckbox2'>
        <input type='checkbox' name='mycheckbox3'>
    </div>
    <div>
        <input type='checkbox' name='mycheckbox4'>
        <input type='checkbox' name='mycheckbox5'>
        <input type='checkbox' name='mycheckbox6'>
    </div>
</div>

Javascript：

$('#outside_div').on('change', 'input[type=checkbox]', function(){
      if($(this).is(':checked') ){
        console.log('CheckBox inside outside_div is checked!');
      }
});

结果：

Javascript没有回复。我试过的另一种方法是将#outside_div改为body并且它正在工作。但我不希望在outside_div之外的复选框中执行Javascript。任何人都可以解释我的代码有什么问题，并分享解决方案来解决它？

谢谢

Answer 1

这是编写函数的正确方法：

$('#outside_div').on('change', 'input[type=checkbox]', function(){
      if($(this).is(':checked') ){
        console.log('CheckBox inside outside_div is checked!');
      }
});

唯一的问题是缺少右括号和分号。

如何使用JavaScript在deep div中触发onChange of Checkbox？

1 个答案: