好的，我在页面上有很多复选框。我需要检测何时单击/更改这些复选框中的任何一个，以便我可以运行一个函数。假设该函数只是将复选框的ID打印到控制台。这是我到目前为止所拥有的：https://jsfiddle.net/4ody743b/
我正在尝试给每个复选框输入相同的类(function($){
//get context
var c = document.getElementById("editor").getContext("2d");
tools = {
save: function() {
prompt("Hello");
}
crop: function() {
prompt("Bye");
}
};
$("#toolbar").children().click(function(e) {
//prevent a href click
e.preventDefault();
//call the relevant function
tools[this.id].call(this);
});
})(jQuery);
，这样我就可以检测到该类中的更改，使用myCheckboxes键确切确定我点击了哪个输入然后运行该函数（不确定这是否有效）。如果没有使用this关键字有更好的解决方案，我也很好奇。我对Javascript很新，很抱歉，如果这个问题没有用。
答案 0 :(得分：2)
有一个事件，它称为change事件。你可以这样听：
$('.myCheckboxes').on('change', function() {
// ...
});
或：
$('.myCheckboxes').change(function() {
// ...
});
示例：
function printID (element) {
console.log(element.id)
}
$('.myCheckboxes').change(function() {
printID(this); // this is only accessible within this anounimous function
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="0" class="myCheckboxes">
<input type="checkbox" id="1" class="myCheckboxes">
<input type="checkbox" id="2" class="myCheckboxes">
<input type="checkbox" id="3" class="myCheckboxes">
<input type="checkbox" id="4" class="myCheckboxes">
注意：
由于printID不是事件监听器的回调（它不是分配事件监听器时传递的函数），因此它不会绑定关键字this复选框，所以当从事件监听器的实际函数调用它时，您必须将元素作为参数传递。如果您想将printID指定为事件监听器的回调，那么您可以在this内使用printID，那么您必须像这样传递对它的引用：
$('.myCheckboxes').change(printID);
现在您可以在this内使用printID，如下所示：
function printID() {
var checkbox = this;
console.log(checkbox.id);
}
如果您不想使用最好的this，可以使用传递给事件侦听器函数的event参数，并使用event.target访问该元素，如下所示：< / p>
$('.myCheckboxes').on('change', function(ev) {
var element = ev.target; // the same as this
// ...
});
示例：
function printID (element) {
console.log(element.id)
}
$('.myCheckboxes').change(function(ev) {
printID(ev.target);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="0" class="myCheckboxes">
<input type="checkbox" id="1" class="myCheckboxes">
<input type="checkbox" id="2" class="myCheckboxes">
<input type="checkbox" id="3" class="myCheckboxes">
<input type="checkbox" id="4" class="myCheckboxes">
修改
您要执行的任何事件监听的代码应该包含在load事件回调中，如下所示：
$(function() { // this is the load callback (jQuery shortcut for $(document).ready)
// print the values of the already checked boxes here
// any thing you want to do on window load should be here
// anything that have something to do with the DOM (event listenening, changing element, deleting them, ...) should be here
$('.myCheckboxes').change(function() { // this is also should be here
// ...
});
});
事实上，与DOM交互的所有代码都应该在加载回调中（ SAFER ）。函数定义可能在外部但是DOM元素的获取，删除它们，更改它们的属性和文本内容......应该等待加载DOM。
$(function() {
$("someElement").remove(); // OK
$("otherEements").each(someFunction); // OK
});
function someFunction() { // OK (even if its outside, because this is a function definition it doesn't mean it's going to be executed right away)
// ...
}
$("yetAnotherElement").addClass("someClass"); // NOT OK: if the code is before the body (if the js code is in the head of the html), then yetAnotherElement is not there yet so the class is never set on it, this line is better be inside the load event
someFunction(); // OK if someFuntion doesn't do anything with the DOM
// NOT OK if the someFunction is doing something with the DOM, because we are calling it from outside the load event which mean that there is a good chance that the DOM is not loaded yet and the element someFunction trying to access or modify are not yet parsed or created