Question

I have this Jquery :

$(document).ready(function() {
   $('input[type="checkbox"]').click(function() {
       var togClass=$(this).attr('class');
       if($(this).attr('checked')){
          $(this).parent().parent().('div.' + togClass ).css("display", "inline-block");
       }
       else {
          $('div.' + togClass ).css("display", "none");

       }
   });
});

and this Html essentially repeated:

<div id="Coltext">
     <div id= "Sidechecks">
      <input checkbox class= "ModelName">
     <div id="seqWrap">
     <div id="Nucwrap"> 
     <div id="hit" class= "modelname">"String"</div>
     </div> 
     </div>
     </div>
 </div>   

When i click on the checkbox I want the all the HIT divs to become invisible, in this Div only. The main DIV- coltext is repeated many times, each has th e same model, however when the user clicks on the checkbox, I only want the Hit Divs for that main div to dissapear, and then reappear on click. Cant anyone help,It seems simlpe, but i cant get it working ?

Answer 1

See comment about validateable html. Im not sure that <input checkbox class= ModelName>
will render into something selectable by $('input[type="checkbox"]')

Try changing

$(this).parent().parent().('div.' + togClass )

to

$(this).parent('div.' + togClass + "[hit]")

This should traverse upwards, looking for any DIV with the togClass that has parameter ‘hit’