的jQuery淡出

Question

<div id="formheadtop"> 
<input class="checkbox" type="checkbox" /></div><div class="formbody"></div> 
<div id="formheadtop"> 
<input class="checkbox" type="checkbox" /></div><div class="formbody"></div> 
<div id="formheadtop"><input class="checkbox" type="checkbox" /></div><div class="formbody"></div> 



$(function() { $('input:checkbox').live('click', function() { 
if ($(this).attr('checked') == true) 
{ 
    $(this).nextAll('.formbody:first').fadeIn(); 
} 
else 
{ 
$('.formbody').fadeOut(); 
}; 
}); 

的代码不能正常工作。我只想淡出下一个div.formody。

Answer 1

首先，我们需要将id="formheadtop"更改为class="formheadtop"，因为ID必须是唯一的。然后你可以使用此代码进出DIV s到褪色：

jQuery的

$(document).ready(function(){ 
    $('.formheadtop :checkbox').live('click', function() { 
    if ($(this).is(':checked')) { 
     $(this).parent().next('.formbody').fadeIn(); 
    } else { 
     $(this).parent().next('.formbody').fadeOut(); 
    }; 
    }); 
}); 

你可以缩短$(this).parent().next('.formbody')到$(this).parent().next().fadeIn()，但我把选择器，以防万一你曾经想放入一些东西。

HTML

<div class="formheadtop"><input class="checkbox" type="checkbox" checked="checked" /></div> 
<div class="formbody">test</div> 
<div class="formheadtop"><input class="checkbox" type="checkbox" checked="checked" /></div> 
<div class="formbody">test</div> 
<div class="formheadtop"><input class="checkbox" type="checkbox" checked="checked" /></div> 
<div class="formbody">test</div> 

我做了检查通过默认的复选框。如果没有，你需要隐藏在formbody标签的内容。

这里的code in action。