关闭隐藏分区时的引导复选框开关

Question

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

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

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

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

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

但当我切换到关闭时，检查不会消失，所以我尝试了这个：

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

运气不佳

我发出警报，查看属性是否在中工作

$(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();
    }
});
});

我为名称数字表单创建了一个唯一的属性，也被称为数据名称数字表单

Answer 1

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

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

编辑-对评论的回应如果你想在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-对评论的回应如果有多个开关和关联的name-number-form，可以使用jQuery next方法用指定的选择器选择下一个sibbling。例如，

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