Question

好的，所以我的代码很有趣，有这种结构：

首先打开一个主div，然后使用foreach创建复选框。为数组中的每个“模型”创建一个复选框

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

等

在此之后，在某些条件下，在foreach循环中打开另一个div：

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

</div>

我与班级hti的div，将被着色。如果选中/取消选中复选框，我希望能够切换div（class = hit）。因此，如果选中复选框“ModelName1”，则所有具有class =“ModelName1”的div将具有白色背景或隐藏。

有人可以帮忙吗？

Answer 1

我知道你接受了你实现这个Pure CSS的答案。写得像这样：

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

选中此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

我发现你的问题有点令人困惑，但也许这就是你的意思：

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

演示：http://jsfiddle.net/cpXPX/

请注意，你的html在你的孩子div中有一个拼写错误 - 你在class属性的中间有两个双引号，你应该有一个空格，所以改变：

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

到

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

（如我的demo所示。）

使用复选框切换具有两个类的特定div

3 个答案: