toggle specific divs that have two classes using checkboxes

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 know you accept the answer you achieve this Pure CSS. Write like this:

.ModelName1:checked ~ .seqWrap .ModelName1,
.ModelName2:checked ~ .seqWrap .ModelName2
{background:none;}

Check this http://jsfiddle.net/cpXPX/1/

Answer 2

$('input:checkbox').change(function(){
  if ($(this).is(':checked'))
    $('div.'+$(this).attr("class")).hide();
  else
    $('div.'+$(this).attr("class")).show();
})

Answer 3

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 .)