Question

我有一个基于复选框选择显示/隐藏（切换）div的代码。代码很简单：

$(function () {
    $('#sucursal').on('click', function () {
        $("#rifEmpresa").toggle(!this.checked);
        $("#rifSucursal").toggle(this.checked);
    });
});

这是有效的，因为div#rifEmpresa是隐藏的，当选中复选框时会显示div#rifSucursal，反之亦然。现在我有一个额外的条件，当我检查checkbox#chkRif时，我需要显示div#rifEmpresa所以我已经完成了这段代码：

$(function () {
    $('#sucursal').on('click', function () {
        $("#rifEmpresa").toggle(!this.checked);
        $("#rifSucursal").toggle(this.checked);
    });

    $('#chkRif').on('click', function () {
        if (this.checked) {
            $("#rifEmpresa").removeAttr('style');
        } else {
            $("#rifEmpresa").attr('style', 'display:none');
        }
    });
});

但它不起作用。我尝试了几种方法：使用$("#rifEmpresa").toggle(this.checked)，使用$("#rifEmpresa").show() / $("#rifEmpresa").hide()并且无效。我设置Fiddle用于测试目的，我做错了什么？

Answer 1

JSFiddle - DEMO

$(function () {
    $('html').addClass('fuelux');

    //------ Toggle Sucursal Field
    $('#sucursal').on('click', function () {
        $("#rifEmpresa").toggle(!this.checked);
        $("#rifSucursal").toggle(this.checked);

        // ------ Turn rifSucursal search input in Select2 element
        $("#filtro").select2();
    });

    //------ Toggle Sucursal Field
    $('#chkRif').on('click', function () {
        if ($('input#chkRif').is(':checked')) {
            $("#rifEmpresa").removeAttr('style');
        } else {
            $("#rifEmpresa").attr('style', 'display:none');
        }
    });
});

Answer 2

你需要这个

更新了FIDDLE

http://jsfiddle.net/h0qgduuh/3/

$(function () {
    $('html').addClass('fuelux');

    //------ Toggle Sucursal Field
    $('#sucursal').on('click', function () {
        $("#rifEmpresa").toggle(!this.checked);
        $("#rifSucursal").toggle(this.checked);

        // ------ Turn rifSucursal search input in Select2 element
        $("#filtro").select2();
    });

    //------ Toggle Sucursal Field
    $('#chkRif').on('click', function () {
        if (this.checked) {
            $("#rifEmpresa").removeAttr('style');
        } else {
            $("#rifEmpresa").attr('style', 'display:block');//changed display:none to display:block
        }
    });
});

显示复选框选中操作的第二个元素

2 个答案: