选中所有复选框

Filth 发表于 Dev

污秽

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

基本上，选择所有三个选项后，我只想显示手机号码。

如果仅选择了最后一个选项，则显示房屋号码。

如果全部选择了三个，则显示移动设备并隐藏住家。

我设法得到一种情况，如果用户单击最后一个选项，则显示房屋号码，但是如果全部三个都被选中，则不会。

请参阅下面的我的jQuery ...

演示

    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();
});

埃桑·贾杰德（Ehsan Sajjad）

您必须这样做：

 $("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');
            }

        });