Question

我有这个结构，我想隐藏div类＆＃34; categorydesc＆＃34;当我检查清单中的某些内容时...... 我怎么能这样做？

<ul id="ul_layered_id_feature_10" class="col-lg-12">
<li id="layered_id_feature_10" class="checkbox" >
<input class="checkbox" name="layered_id_feature_10" id="layered_id_feature_10" type="checkbox">
<label for="layered_id_feature_10">test</label>
</li>
<li id="layered_id_feature_9" class="checkbox" >
<input class="checkbox" name="layered_id_feature_9" id="layered_id_feature_9" type="checkbox">
<label for="layered_id_feature_9">test</label>
</li>
</ul>

<div class="categorydesc">
<p>test</p>
</div>

Answer 1

您可以使用toggle方法更简单地完成此操作。

$(document).ready(function(){
	$('#checkbox').change(function(){
      	$('#container').toggle();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="checkbox"> Display
<hr/>
<div id="container" style="display:none;">
test
</div>

Answer 2

希望这会有用

$('.checkbox').change(function(){
    if(this.checked)
        $('somediv').fadeIn('slow');
    else
        $('somediv').fadeOut('slow');

});

Answer 3

您可以使用以下代码：

＆＃13;

$(document).ready(function(){
  $('#checker').change(function(){
      if($(this).is(':checked'))
      {
      	$('#data').show();
      }
      else
      {
      	$('#data').hide();
      }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="checker"> Display
<hr/>
<div id="data" style="display:none;">
em Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
</div>

＆＃13;

我们在这里做的是：

我们使用id = checker监听复选框的更改事件。

一旦检测到更改，我们会检查复选框是否已选中或未选中。

如果选中它，那么我们将显示带有id数据的div，否则将其隐藏。

您也可以在案例中使用上述代码段，方法是相应修改。

Answer 4

我为你设置了一些代码。这是工作。我希望这对你有所帮助。

＆＃13;

$(document).ready(function(){
 $('input.myCheckbox').click(function(){
   if($(this).prop('checked')) {
   alert(1);
   	$('.categorydesc').hide();
   }
   else{
   	$('.categorydesc').show();
   }
   });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<ul id="ul_layered_id_feature_10" class="col-lg-12">

  <li id="layered_id_feature_10" class="checkbox">
    Test<input type="checkbox" class="myCheckbox" />
  </li>
  <li id="layered_id_feature_9" class="checkbox">
    Test<input type="checkbox" class="myCheckbox" />
  </li>

</ul>

<div class="categorydesc">
	<p>Content</p>
</div>

＆＃13;

如何在选中复选框时隐藏div - JQuery

4 个答案: