twitter-bootstrap 关闭时引导复选框切换隐藏 div

bootstrap checkbox switch when off hide div

提问by anmaree

I have a bootstrap checkbox switch on my site.

我的网站上有一个引导复选框开关。

http://www.bootstrap-switch.org/

http://www.bootstrap-switch.org/

when the switch is switched to off I would like to hide the div class "name-number-form

当开关切换到关闭时，我想隐藏 div 类“name-number-form

I noticed however, that when the switch is switched on and off, the checked does not disappear when its off. If that was the case I would have done this:

然而，我注意到，当开关打开和关闭时，选中的选项在关闭时不会消失。如果是这样的话，我会这样做：

$(document).ready(function() {
$('.switch-on input[type=checkbox]').change(function(){
    if($(this).is(':checked')){
        $('.name-number-form').show();
    } else {
        $('.name-number-form').hide();
    }
});
});

but when I switch to off the checked does not disappear so I tried this:

但是当我切换到关闭时，选中的不会消失，所以我尝试了这个：

$(document).ready(function() {
$('.switch-on').change(function(){
    if($(this).is('.switch-on')){
        $('.name-number-form').show();
    } else {
        $('.name-number-form').hide();
    }
});
});

no luck

没有运气

I made an alert to see if the attribute is working

我发出警报以查看该属性是否有效

$(document).ready(function() {
$('.switch-on').on('switch-change', function (e, data) {
    alert('this is switch ' + $(this).attr('switch-id'));
    var $el = $(data.el)
            , value = data.value;
    if(value){//this is true if the switch is on
        $('.name-number-form').show();
    }else{
        $('.name-number-form').hide();
    }
});
});

i created a unique attribute for the name-number-form too called data-name-number-form

我为 name-number-form 创建了一个唯一的属性，也称为 data-name-number-form

回答by melc

To catch the change of the switch you need to assign a callback to the switch-changeevent. For example,

要捕捉开关的变化，您需要为switch-change事件分配一个回调。例如，

http://jsfiddle.net/NuE7X/

http://jsfiddle.net/NuE7X/

$(document).ready(function() {
    $('.switch-on').on('switch-change', function (e, data) {
        var $el = $(data.el)
          , value = data.value;
        if(value){//this is true if the switch is on
           $('.name-number-form').show();
        }else{
           $('.name-number-form').hide();
        }
    });
});

EDIT - response to commentsIf you want to start in offstate and have the div hidden, you can modify html as follows,

编辑 - 对评论的回应如果您想以off状态开始并隐藏 div，您可以按如下方式修改 html，

<div class="make-switch switch-on">
    <input type="checkbox">
</div>
<div class="name-number-form" style="display:none">this is name number form</div>

EDIT2 - response to commentsIf you have multiple switches and associated name-number-formyou could use jQuery nextmethod to select the next sibbling with the specified selector. For example,

EDIT2 - 对评论的回应如果您有多个开关并关联，name-number-form您可以使用 jQuerynext方法选择具有指定选择器的下一个同级。例如，

http://jsfiddle.net/V7gjM/

http://jsfiddle.net/V7gjM/

$(document).ready(function () {
    $('.switch-on').on('switch-change', function (e, data) {

        var $el = $(data.el),
            value = data.value;
        if (value) { //this is true if the switch is on
            $(this).next('.name-number-form').show();
        } else {
            $(this).next('.name-number-form').hide();
        }
    });
});