javascript - 如何使用 JavaScript 触发深层 div 内的 Checkbox 的 onChange？

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!');
      }
});

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