jquery - 使用 jQuery 动态检查和取消选中复选框：错误？二

Question

我想使用与使用 jQuery 动态检查和取消选中复选框中所述相同的功能：错误？- 即一个主复选框和两个从复选框。

与上一个问题相比的不同之处在于，我需要将所有复选框声明为 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 示例（我添加了 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();
        }
    });

});

小提琴