javascript - 选中所有复选框

Question

我想知道如何使用 jQuery 查看是否选中了所有复选框。

基本上当所有三个选项都被选中时，我只想显示手机号码。

如果只选择了最后一个选项，则显示家庭电话号码。

如果选择了所有三个，则显示移动设备并隐藏主页。

我设法解决了以下情况:如果用户单击最后一个选项，则显示家庭电话号码，但如果同时选择了所有三个选项，则不会。

在下面查看我的 jQuery...

DEMO

    var form = {

    init: function() {
        form.selection();
        form.showHomeNumber();
    },

    selection: function() {
        var option = $('.checkbox');

        option.on('click', function(e){
            e.preventDefault();
            $(this).toggleClass('active');
            $(this).children().prop( 'checked', !$(this).children().prop('checked') );

        });
    },

    //If I select only the last option show home number
    showHomeNumber: function() {
        var homeNumber = $('.home-number'),
            lastOption = $('.last-option'),
            mobileNumber = $('.mobile-number');

        lastOption.on('click', function(e){
            e.preventDefault();
            //If all three are selected show mobile, hide home
            if ($("form input:checkbox:checked").length === 3) {
               mobileNumber.css('display', 'block'); 
               homeNumber.hide();
            }
            //If select last option only show home
            homeNumber.toggleClass('home-active');
            //If select last option only hide mobile
            mobileNumber.toggleClass('mobile-inactive');


        });
    }
}
$(function(){
    form.init();
});

Answer 1

你必须这样做:

 $("li.checkbox").on('click', function (e) {
            e.preventDefault();

            //If all three are selected show mobile, hide home
            if ($("ul li.checkbox.active").length > 1) {
                mobileNumber.css('display', 'block');
                homeNumber.hide();
            } else if ($("li.last-option").hasClass("active")) {
                //If select last option only show home
                homeNumber.toggleClass('home-active');
                homeNumber.show();
                mobileNumber.hide();
                //If select last option only hide mobile
                mobileNumber.toggleClass('mobile-inactive');
            }

        });

演示:

UPDATED FIDDLE

UPDATED WITH CHECKBOX WORKING