When changing any checkbox inside a div trigger, the function

Question

Suppose there are several checkboxes in the div (call it "startwars"). I know how to check and run a function if the state of the checkbox is changed or clicked throughout the page by doing:

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

but what if I want to limit this area to a div and check if any of the checkbox states that are inside this div is changed or clicked,

I want to call a function if any of the checkboxes is changed / clicked inside a div element using jQuery

Answer 1

add a class or id to the div that you want to limit the scope and use in your selector in 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") }); 

Answer 2

You can do this by adding an id or class to the div in which you want the event to happen as follows: 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 working"); }); </script>