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

実際のデモ http://jsfiddle.net/wjkEy/

提供された JS コードdisplay:noneの else コードに小さな変更を加えました。単に.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 に答える
1

この機能を使用します：

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

それにトランジションを追加することもできます。フェードインやフェードアウトなど、jQueryUI を使用したものと同様です。

詳細: jQuery UI - エフェクト

于 2013-10-10T10:13:53.437 に答える
0

次のように簡単にすることができます

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

デモ:フィドル

于 2013-10-10T10:04:54.707 に答える