CODEWITHSUNDEEP
javascriptjqueryhtmlcsscheckbox
Eru
Eru

Reputation: 51

Check box jQuery show hidden div

I think this is simple, but I can't find the answer. I have a check box and two 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);
    }
});

I want first view to be <div class='all'> and hidden <div class='not_all'>. When I uncheck the check box, the view is <div class='not_all'> and hidden <div class='all'>.

Upvotes: 0

Views: 232

Answers (4)

Suchit kumar
Suchit kumar

Reputation: 11859

you have given class so use . instead of # for your divs.

note: # is used to access id and . is to access class. 

	$('#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>

Upvotes: 2

deviloper
deviloper

Reputation: 7240

divs all and not_all are defined as classes and not ids, so use . to address them in your code: try this:

$('#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

Upvotes: 1

Mangesh Parte
Mangesh Parte

Reputation: 2177

Try this:

$('#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();
    }
})

Upvotes: 1

Dat Nguyen
Dat Nguyen

Reputation: 1891

You have to change "#" into "." for class selection. Your code look like below:

$('#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);
    }
})

Upvotes: 0

Related Questions