javascript - 在复选框选中的 Action 上显示第二个元素

我有一个基于复选框选择显示/隐藏（切换）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，我做错了什么？

最佳答案

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