Question

我想使用与Check and Uncheck Checkbox Dynamically with jQuery : bug?中描述的功能相同的功能 - 即一个主复选框和两个从属复选框。

与上一个问题相比，我需要将所有复选框声明为button（）（如此处所示：http://jqueryui.com/button/#checkbox）：

$(document).ready(function() {

    $( "#myCheck" ).button();
    $( "#myCheck2" ).button();
    $( "#myCheck3" ).button();

    $('#myCheck').click(function() {
        $('.myCheck').prop('checked', false);
    });

    $('.myCheck').click(function() {
        if ($('.myCheck').is(':checked')) {
            $('#myCheck').prop('checked', false);
        } else {
            $('#myCheck').prop('checked', true);
        }
    });

});

请参阅http://jsfiddle.net/uQfMs/90/

这种差异的结果是功能消失了。我找不到原因。

Answer 1

试试这个：

$(document).ready(function () {
    $("#myCheck,#myCheck2,#myCheck3").button();
    $('#myCheck').click(function () {
        $('.myCheck').prop('checked', $(this).is(':checked'));
        $("#myCheck,#myCheck2,#myCheck3").button('refresh');
    });
    $('.myCheck').click(function () {
        if ($('.myCheck:checked').length === $('.myCheck').length) $('#myCheck').prop('checked', true);
        if ($('.myCheck:checked').length < $('.myCheck').length) $('#myCheck').prop('checked', false);
        $("#myCheck,#myCheck2,#myCheck3").button('refresh');
    });
    $('#myCheck').click();
});

jsFiddle example （我添加了CSS，因此您可以看到复选框已更改）

Answer 2

对脚本的更改：

$(document).ready(function () {

    $("#myCheck").click(function () {
        if (!$(this).prop('checked')) {
            $('.myCheck').each(function () {
                $(this).prop('checked', false);
            });
        }
    });

    $('.myCheck').click(function () {
        if (!$("#myCheck").prop('checked')) {
            event.preventDefault();
        }
    });

});

<强> Fiddle

使用jQuery动态检查和取消选中复选框：bug？ II

2 个答案: