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

我通常通过将trigger('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();
    }
});

DEMO

Answer 4

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

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

4 个答案: