Question

我认为这很简单，但我无法找到答案。我有一个复选框和两个div：JS Fiddle。

HTML：

<input type='checkbox' checked='checked' name='All' id='All' value='All' />
 <label for='All'><small>All</small></label>

<div class="all">Ini ALL</div>
<div class="not_all" style="display:none;">Ini not ALL</div>

JavaScript的：

$('#All').click(function(){
    if (this.checked) {
      $('#not_all').hide(1000);
      $('#all').show(1000);
    }else{
      $('#not_all').attr('style','inline-block');
      $('#all').hide(1000);
      $('#not_all').show(1000);
    }
});

我希望第一个视图为<div class='all'>并隐藏<div class='not_all'>。当我uncheck复选框时，视图为<div class='not_all'>并隐藏<div class='all'>。

Answer 1

您已经上课了，所以请为您的div使用.代替#。

注意： #用于访问ID，.用于访问类。

	$('#All').on('click',function(){
	    if (this.checked) {
	      $('.not_all').hide(1000);
	      $('.all').show(1000);
	    }else{
	      $('.not_all').attr('style','inline-block');
	      $('.all').hide(1000);
	      $('.not_all').show(1000);
	    }
	})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='checkbox' checked='checked' name='All' id='All'  value='All'  />
 <label for='All'><small>All</small></label>

<div class="all">Ini ALL</div>
<div class="not_all" style="display:none;">Ini not ALL</div>

Answer 2

试试这个：

$('#All').click(function(){
    if ($(this).is(":checked")) {
      $('.not_all').delay(1000).hide();
      $('.all').show();
    }else{
      $('.not_all').attr('style','inline-block');
      $('.all').hide();
      $('.not_all').show();
    }
})

Answer 3

div all和not_all被定义为类而不是ID，因此请使用.在代码中解决它们：试试这个：

$('#All').click(function(){
    if (this.checked) {
      $('.not_all').hide(1000);
      $('.all').show(1000);
    }else{
      $('.not_all').css('display','inline-block'); # use css() instead of attr()
      $('.all').hide(1000);
      $('.not_all').show(1000);
    }
});

DEMO

Answer 4

你必须改变＃34;＃＆＃34;进入＆＃34;。＆＃34;用于选课。您的代码如下所示：

$('#All').click(function(){
    if (this.checked) {
         $('.not_all').hide(1000);
         $('.all').show(1000);
    }else{
         $('.not_all').attr('style','inline-block');
         $('.all').hide(1000);
         $('.not_all').show(1000);
    }
})

复选框jQuery show hidden div

4 个答案: