选中切换元素复选框

Toggle element on checkbox checked

本文关键字：元素 复选框      更新时间：2023-09-26

我正在使用 Fuelux 复选框组件，我正在尝试根据选中的复选框切换一些 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复选框，它总是显示。 正确的方式应该是：

  1. 选中第一个可见的复选框"点击我">
  2. 隐藏#rifEmpresa DIV 并立即显示#rifSucursal显示但第一个不隐藏
  3. 在 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>

任何人都可以给我一些帮助，告诉我我做错了什么以及如何修复我的代码？这是一个用于测试目的的简单小提琴

试试这个

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 控件有自己的自定义事件，可以捕获这些事件。

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

就像一个普通的复选框。如果你不能，这是一个错误，你可能想尝试签出/鲍尔安装 #master，因为我们在过去两周里一直在错误修复复选框控件。

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

相关文章：