jquery suivant par classe fondu

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(); 
}; 
}); 

Le code ne fonctionne pas. Je veux fondre seulement le prochain div.formbody.

Answer 1

D'abord nous devrons changer id="formheadtop" à class="formheadtop", puisque ID s doit être unique. Ensuite, vous pouvez utiliser ce code pour effacer et les 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(); 
    }; 
    }); 
}); 

Vous pouvez raccourcir $(this).parent().next('.formbody')-$(this).parent().next().fadeIn(), mais je mis dans le sélecteur, juste au cas où vous voulez jamais mettre quelque chose entre les deux.

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> 

J'ai fait les cases à cocher cochés par défaut. Si ce n'est pas le cas, vous devez masquer le contenu des balises formbody. Il s'agit du code in action.