使用 jQuery 动态选中和取消选中复选框:错误?第二

Question

我想使用与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示例（我添加了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();
        }
    });
});

小提琴