0

我不知道如何在单击 Clickbox 时显示下一个 div (.hide)。

演示链接：http: //jsfiddle.net/fvuqW/

这是我的 jQuery 代码：

        $(function(){
            $('.form input[type=checkbox]').each(function() 
                {
                $(this).change(function()
                    {
                    if($(this).is(':checked'))
                        {
                        $(this).next('div.hide').css('display', 'block');
                        }
                    else 
                        {
                        $(this).next('div.hide').css('display', 'block');
                        }
                    });
                });
        });
4

7 回答 7

2

分隔线.hide不在您的输入附近。您需要先找到输入元素的包含分隔符，然后调用.next(). 我已将您的代码压缩为：

$('input[type=checkbox]').change(function() {
    $(this) /* The checkbox */
        .closest('div') /* The input's ancestor divider (".form_checkboxes"). */
        .next() /* The divider next to the ancestor divider. */
        .toggleClass('hide') /* Toggle the class "hide". */
    ;
});

JSFiddle 演示。

于 2013-10-10T10:05:50.280 回答
1

使用此功能：

$(document).ready(function() {
        $('input[type=checkbox]').change(function() {
          $('.hide').toggle();
       });
    });

您甚至可以为其添加过渡。像fadeIn 或fadeOut 或jQueryUI 的其他任何东西。

更多信息：jQuery UI - 效果

于 2013-10-10T10:13:53.437 回答
1

尝试这个

$(function(){
    $('input[type=checkbox]').change(function() {
        $(this).closest('div').siblings("div").toggleClass('hide');
    });
});

演示

于 2013-10-10T10:08:30.867 回答
1

工作演示 http://jsfiddle.net/wjkEy/

我display:none在 else 代码中对您提供的 JS 代码做了一些小改动，您可以简单地使用.showor .hide。

这应该适合您的需要:)

代码

$(function () {
    $('input[type=checkbox]').each(function () {
        $(this).change(function () {
            if ($(this).is(':checked')) {
                $(this).parents('.checkbox').find('.hide').css('display', 'block');
            } else {
                $(this).parents('.checkbox').find('.hide').css('display', 'none');
            }
        });
    });
});
于 2013-10-10T10:03:39.120 回答
0

It can be as simple as

$(function () {
    $('input[type=checkbox]').change(function () {
        $(this).closest('.checkbox').find('.hide').toggle(this.checked)
    }).filter(':checked').change();
});

Demo: Fiddle

于 2013-10-10T10:04:54.707 回答
0

这样做：

$(this).closest('.hide').nextAll('.hide').eq(0).show();
于 2013-10-10T10:04:02.717 回答
0

这将帮助你

    $(document).ready(function() {

       $('#checkbox').change(function() {
          if($(this).is(":checked")) {
             // do something...
       }
     else{
           //do something...
       }  

    });
});

看看这个演示 JSFiddle

于 2013-10-10T10:07:52.197 回答