Question

单击Clickbox时，我不知道如何显示下一个div（.hide）。

这是我的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');
                        }
                    });
                });
        });

Answer 1

.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 demo

Answer 2

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

我在else代码中对您提供的JS代码display:none进行了少量更改，您只需使用.show或.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');
            }
        });
    });
});

Answer 3

试试这个

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

Demo

Answer 4

使用此功能：

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

您甚至可以向其添加过渡。像fadeIn或fadeOut或其他任何与jQueryUI。

更多信息： jQuery UI - EFfects

Answer 5

这样做：

$(this).closest('.hide').nextAll('.hide').eq(0).show();

Answer 6

可以像

一样简单

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

演示：Fiddle

Answer 7

这会对你有所帮助

    $(document).ready(function() {

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

    });
});

看看这个演示 JSFiddle

jQuery如何显示下一个div

7 个答案: