Question

由于一些奇怪的要求以及我们的应用程序中实现jQuery的方式，我必须通过复选框onclick事件调用jQuery函数。

以下是通过div ID触发的功能的完美实现。但是，相同的代码在我的应用程序中不起作用。

在我的应用程序中，我使用的是jQuery 1.7.1版。我没有收到任何错误，该功能根本不会触发。我正在使用Chrome进行调试。当我尝试在onclick中调用它时它会响应，但会抛出undefined。

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

$(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);
    });     
});

最后，小提琴链接

http://jsfiddle.net/uxRGB/1/

Answer 1

使用change事件代替click

$('#chkall').change(function() {

如果仍然无效，您可以使用：

<input type="checkbox" id="chkall" onclick="myfunc()" />

并且：

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

Answer 2

不确定是否会导致您遇到的问题，但您当前的代码在点击时会更改“全部检查”复选框，这在某些浏览器上可能会导致意外结果。

首先，将代码更改为：

var opt = $(this).parent().find('input[type=checkbox]').not($(this));

除了被点击的复选框之外，这将影响所有复选框。

现在假设你想在单击一个单独的按钮时运行相同的代码，只需：

$("#btnFoo").click(function() {
    $('#chkall').click();
});

Updated fiddle

Answer 3

你试过这个吗？

 $('#chkall').trigger('click');

这应该执行附加到复选框的任何处理程序和行为。请参阅：http://api.jquery.com/trigger/

从onclick事件调用jQuery函数

3 个答案: