从 onclick 事件调用 jQuery 函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18043444/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Calling a jQuery function from onclick event
提问by mynameisneo
Due to some bizarre requirements and the way jQuery is implemented in our application, I have to call a jQuery function through a checkbox onclick event.
由于一些奇怪的要求以及在我们的应用程序中实现 jQuery 的方式，我必须通过复选框 onclick 事件调用 jQuery 函数。
Below is a perfectly good implementation of the function being triggered via div ID. However, this same code will not work in my application.
下面是通过 div ID 触发的函数的完美实现。但是，同样的代码在我的应用程序中不起作用。
In my application, I am using jQuery version 1.7.1. I am not getting any errors, the function simply does not trigger. I'm using Chrome to debug. When I try to invoke it in onclick it responds, but throws back undefined.
在我的应用程序中，我使用的是 jQuery 1.7.1 版。我没有收到任何错误，该功能根本不会触发。我正在使用 Chrome 进行调试。当我尝试在 onclick 中调用它时，它会响应，但会返回undefined.
HTML
HTML
<div id="dialog-confirm" title="Select Options">
<!--I need to call function in onclick event for checkbox below-->
<input type="checkbox" id="chkall" /> Check/Uncheck
<br /><br />
<input type="checkbox" />Option 1<br />
<input type="checkbox" />Option 2<br />
<input type="checkbox" />Option 3<br />
<input type="checkbox" />Option 4<br />
<input type="checkbox" />Option 5<br />
<input type="checkbox" />Option 6<br />
<input type="checkbox" />Option 7
</div>
JS
JS
$(function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height:350,
modal: true,
buttons: {
"Go": function() {
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
});
$(document).ready(function(){
$('#chkall').click(function() {
// this is the function I need to call
var opt = $(this).parent().find('input[type=checkbox]');
opt.prop('checked', $(this).is(':checked') ? true : false);
});
});
Finally, Fiddle link
最后，小提琴链接
回答by frogatto
Use changeevent instead of click
使用change事件代替click
$('#chkall').change(function() {
if still not worked, you can use this:
如果仍然没有工作，你可以使用这个：
<input type="checkbox" id="chkall" onclick="myfunc()" />
And:
和：
function myfunc () {
// this is the function I need to call
var opt = $("#chkall").parent().find('input[type=checkbox]');
opt.prop('checked', $("#chkall").is(':checked') ? true : false);
}
回答by Shadow Wizard is Ear For You
Not sure it's causing the problem you're facing but your current code is changing the "check all" checkbox itself when clicking it, which on some browsers might cause unexpected results.
不确定它是否会导致您面临的问题，但您当前的代码在单击它时会更改“全部选中”复选框本身，这在某些浏览器上可能会导致意外结果。
First, change the code to:
首先，将代码更改为：
var opt = $(this).parent().find('input[type=checkbox]').not($(this));
This will affect all checkboxes except the one being clicked.
这将影响除被单击的复选框之外的所有复选框。
Now assuming you want to run the same code when clicking a separate button, just have:
现在假设您想在单击单独的按钮时运行相同的代码，只需：
$("#btnFoo").click(function() {
$('#chkall').click();
});
回答by Stephen
Have you tried this?
你试过这个吗？
$('#chkall').trigger('click');
That should execute any handlers and behaviors attached to the checkbox. See: http://api.jquery.com/trigger/
这应该执行附加到复选框的任何处理程序和行为。见：http: //api.jquery.com/trigger/
