Question

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

当开关切换到关闭时，我想隐藏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();
    }
});
});

我为name-number-form创建了一个名为data-name-number-form

的唯一属性

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

关闭隐藏div时自举复选框切换

1 个答案: