2013-10-10 38 views
0

我不知道點擊Clickbox時如何顯示下一個div(.hide)。jQuery如何顯示下一個div

鏈接到演示: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'); 
         } 
        }); 
       }); 
     }); 
+0

你的if語句是完全無用這裏 – Oliboy50

+0

爲什麼要用'的.css( '顯示', '塊')'如果你有'.show()' –

+0

這是下一個div在這裏?有'藏'的那個? –

回答

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 demo

+0

感謝偉大的作品:) – Evolutio

1

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

我在其他人發出了在您提供的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'); 
      } 
     }); 
    }); 
}); 
0

這樣做:

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

它可以簡單到

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

演示:Fiddle

0

這將幫助你

$(document).ready(function() { 

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

    }); 
}); 

看看這個演示 JSFiddle

1

試試這個

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

Demo

1

使用此功能:

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

你甚至可以添加轉換到它。像fadeIn或fadeOut或其他任何與jQueryUI。

更多信息jQuery UI - EFfects