选中复选框上的切换元素答案

【问题标题】：Toggle element on checkbox checked选中复选框上的切换元素
【发布时间】：2014-12-19 05:27:32
【问题描述】：

我正在使用Fuelux Checkbox 组件，我正在尝试根据选中的复选框切换一些 DIV。我的做法如下：

$(document).ready(function(){
    $('#chkSucursal').on('checked.fu.checkbox', function (evt, item) {
        $("#rifEmpresa").toggle(!this.checked);
        $("#rifSucursal").toggle(this.checked);
    });

    $('#chkRif').on('checked.fu.checkbox', function () {
        $("#rifEmpresa").toggle(!this.checked);
    });
});

但由于#rifEmpresa 始终显示，无论选中与否，都无法正常工作。正确的方法应该是：

选中第一个可见复选框“点击我”
现在隐藏#rifEmpresa DIV 并显示#rifSucursal，但第一个不是隐藏
在 RIF? 复选框上切换 #rifEmpresa

这是相关的HTML代码：

<form enctype="multipart/form-data" id="registroEmpresa" role="form" class="form-horizontal" method="POST">
    <div class="panel panel-default">
        <div class="panel-body">
            <div class="form-group">
                <div id="chkSucursal" data-initialize="checkbox" class="checkbox highlight">
                    <div class="col-xs-4 control-label"><strong>Check me</strong>
                    </div>
                    <div class="col-md-6 col-sm-4 checkbox">
                        <label class="checkbox-custom">
                            <input type="checkbox" id="sucursal" name="sucursal" value="1" class="sr-only">
                        </label>
                    </div>
                </div>
            </div>
            <div style="display: none;" id="rifSucursal" class="form-group">
                <div class="row">
                    <label class="col-sm-4 control-label">Find company<span class="text-danger">(*)</span>
                    </label>
                    <div class="col-md-6 col-sm-4">Some FORM element to Show</div>
                </div>
                <div class="row">
                    <div id="chkRif" data-initialize="checkbox" class="checkbox highlight">
                        <div class="col-xs-4 control-label"><strong>RIF?</strong>
                        </div>
                        <div class="col-md-6 col-sm-4 checkbox">
                            <label class="checkbox-custom">
                                <input type="checkbox" id="chkRif" name="chkRif" value="1" class="sr-only"> <span class="checkbox-label">(check me to show "Some Form Element to HIDE")</span>

                            </label>
                        </div>
                    </div>
                </div>
            </div>
            <div id="rifEmpresa" class="form-group has-feedback">
                <label class="col-xs-4 control-label">RIF <span class="text-danger">(*)</span>
                </label>
                <div class="col-md-6 col-sm-4">Some FORM element to Hide</div>
            </div>
        </div>
    </div>
</form>

谁能给我一些帮助并告诉我我做错了什么以及如何修复我的代码？ Here 是一个用于测试目的的简单 Fiddle

【问题讨论】：

试试#rifEmpresa:checked ...
这是因为事件处理程序中的this不是复选框元素
在this.checked的地方，试试...$(***).is(":checked")...***应该是“复选框元素”
@ArunPJohny 是这样吗？我需要依赖.show()/.hide()？
@rfornal 我已经更新了fiddle中的代码，还是不行，你能看看吗？

标签： javascript jquery html checkbox fuelux

【解决方案1】：

试试这个

http://jsfiddle.net/31roa5hz/2/

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

    $('#chkSucursal').on('checked.fu.checkbox', function (evt, item) {
        $("#rifEmpresa").hide('slow');
        $("#rifSucursal").show('slow');
    });


    $('#chkSucursal').on('unchecked.fu.checkbox', function (evt, item) {
        $("#rifEmpresa").show('slow');
        $("#rifSucursal").hide('slow');
    });


    $('#chkRif').on('checked.fu.checkbox', function () {
        $("#rifEmpresa").show('slow');
    });

        $('#chkRif').on('unchecked.fu.checkbox', function () {
        $("#rifEmpresa").hide('slow');
    });

});

我认为您正在使用的控件没有任何已检查的属性，我试图知道该元素是否已检查或未使用 .is(':checked') 它返回未定义。所以我认为更新后的代码更适合您，因为您使用的 UI 控件有自己的自定义事件，可以捕获。

【讨论】：

【解决方案2】：

您应该能够做到这一点： $('input').on('change', checkboxChanged);

就像一个普通的复选框。如果你不能，这是一个错误，你可能想尝试检查/凉亭安装#master，因为我们一直在修复复选框控件over the past two weeks。

我知道在 Fuel UX 3.4.0 中没有设置 checked 属性。

【讨论】：