Question

ok so i have code that fundementally has this structure:

firstly a main div is openedand checkboxes are created using a foreach. A checkbox is created for each ‘model’ in an array

<div id='coltext'>
  <input class ="ModelName1">
  <input class ="ModelName2">

etc.

following this another div is opened in a foreach loop under certain conditions:

  <div class="seqWrap">
    <div class="hit""ModelName1"></div>
    <div class="hit""ModelName2"></div>
  </div>

</div>

I the divs with the class hti, will be colored. I want to be able toggle the divs (class=hit), if the checkbox is checked/unchecked. So if the checkbox “ModelName1″ is checked, all divs that have a class=”ModelName1” will have either a white background, or be hidden.

Can someone help with this?

Answer 1

I found your question a little confusing, but perhaps something like this is what you mean:

$('input[type="checkbox"]').click(function() {
   $('div.' + $(this).attr('class')).toggleClass('hit'); 
});

Demo: http://jsfiddle.net/cpXPX/

Note that your html has a typo in it for your child divs – you’ve got two double-quotes in the middle of the class attribute where you should have a space, so change:

<div class="hit""ModelName1"></div>

to

<div class="hit ModelName1"></div>

(As shown in my demo.)