Question

我有这个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");

       }
   });
});

这个Html基本上重复了：

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

当我点击checkbox时，我希望所有HIT divs变为不可见，仅在此Div中。主DIV- coltext重复多次，每个都有相同的模型，但是当用户点击checkbox时，我只希望该主要div的Hit Divs消失，然后再次出现点击。任何人都无法帮助，似乎是simlpe，但我不能让它工作？

Answer 1

以下是检查复选框是否已选中的方法：

if($(".myCheckbox").is(':checked'))
{
    // do something
}
else
{
    // do something else
}

Answer 2

查看有关可验证html的评论。我不确定<input checkbox class= ModelName>会呈现为$('input[type="checkbox"]')

可选择的内容

尝试更改

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

到

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

这应该向上移动，寻找具有参数'hit'的togClass的任何DIV

Answer 3

修复HTML标记后（根据上面的评论），考虑使用“最近”，它将搜索元素，它是与选择器匹配的最接近元素的祖先（而不是与选择器匹配的所有元素）。 / p>

$(this).closest('div.' + togClass ).css("display", "none");

您当前的else语句正在选择所有匹配的类节点。

Answer 4

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

<强> jquery的

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

Jquery onclick，让父Div无形

4 个答案: