jquery - 创建一个检查 onload 和 change 的事件

Question

我有这段代码，我想要 a) 在选中复选框时运行。b）在页面加载时运行以查看它需要扩展默认隐藏的部分。

$(document).ready(function () {
    $('#hasContractorFlag').on('change', function () {
        if ($(this).is(':checked')) {
            $('#hasContractor').show();
        } else {
            $('#hasContractor').hide();
        }
    });
});

我尝试将load事件添加到上面，但它没有被触发。

我知道我可以做类似的事情并且它会起作用：

$(document).ready(function () {
    noAddress($('#hasContractorFlag'))

    $('#hasContractorFlag').on('change', function () {
        noAddress($(this));
    });

    function noAddress(var field) {
        if ($(field).is(':checked')) {
            $('#hasContractor').show();
        } else {
            $('#hasContractor').hide();
        }
    };
});

实现这一目标的最佳方法是什么？

Answer 1

如果您.change();在准备好的文档中添加方法，它将调用您的方法。

jsFiddle：http: //jsfiddle.net/UQDaW/5/

$(document).ready(function () {
    $('#hasContractorFlag').on('change', function () {
        if ($(this).is(':checked')) {
            $('#hasContractor').show();
        } else {
            $('#hasContractor').hide();
        }
    }).change(); // .change() will execute this method
});

Answer 2

我通常通过将 a 链接trigger('change')到 change 事件的创建来实现这一点

$(document).ready(function () {
    $('#hasContractorFlag').on('change', function () {
        if ($(this).is(':checked')) {
            $('#hasContractor').show();
        } else {
            $('#hasContractor').hide();
        }
    }).trigger('change');
});

Answer 3

你可以试试这个：

function noAddress(field) {
  field.is(':checked') ? $('#hasContractor').show() :  $('#hasContractor').hide();
};

全部一起：

$(document).ready(function() {
    $('#hasContractorFlag').on('change load', function() {
        noAddress($(this));
    });
    function noAddress(field) {
        field.is(':checked') ? $('#hasContractor').show() : $('#hasContractor').hide();
    }
});

演示

Answer 4

$(document).ready(function () {
    $('#hasContractorFlag').on('change', function () {
        $('#hasContractor')[$(this).is(':checked')?'show':'hide']();
    }).change();
});