在更改 div 内的任何复选框时触发一个函数

Posted 2023-05-08

【中文标题】在更改 div 内的任何复选框时触发一个函数

【英文标题】：On change of any checkbox inside a div trigger a function

【发布时间】：2016-03-30 09:30:21

【问题描述】：

假设一个 div 中有多个复选框（称为“startwars”），我知道如果复选框的状态发生更改或通过以下操作在整个页面上单击时如何检查和触发函数：

$('input[type=checkbox]').click(function() 
    console.log("somethign is checked on the page")
);

但是，如果我想将该范围限制为一个 div 并检查是否有任何复选框状态被更改/单击，它们在该 div 内，

如果使用 JQuery 在 div 元素内更改/单击任何复选框，我想触发一个函数

【问题讨论】：

$('#myDivId input[type=checkbox]') :-)

【参考方案1】：

将类或 id 添加到要限制范围的 div 并在 jQuery 的选择器中使用它

<div class='limited'>
    <input type='checkbox' />
</div

JS

$('.limited input[type=checkbox]').change(function()  // while you're at it listen for change rather than click, this is in case something else modifies the checkbox
    console.log("something is checked on the page")
);

【讨论】：

对您解释的 .change 和 .click 的区别非常有帮助，很好！

【参考方案2】：

您可以通过将 id 或类添加到您希望事件发生的 div 中来做到这一点，如下所示：https://jsfiddle.net/oa9wj80x/10/

<div id="slct"">
<h1>
INSIDE
</h1>
  <input type="checkbox">
  <input type="checkbox">
  <input type="checkbox">
</div>
<div>
<h1>
OUTSIDE
</h1>
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
</div>
<script>
$('#slct input[type=checkbox]').change(function() 
alert("See it's working");
);
</script>