CODEWITHSUNDEEP
javascriptjquery
user761065
user761065

Reputation: 123

Checkbox hiding with Jquery

I prepared this hidden functionality for checkbox with jquery. https://jsfiddle.net/o2c8z5xw/ When Hidden is clicked, checkboxes disappear. How can I do this by default, instead of clicking, when the page is opened?

HTML code:

<label><input type="checkbox" id="Hidden" name="Hidden" class="hidden"/>Hidden</label>

<form id="form1" name="form1" method="post" action="">
    <label><input type="checkbox" name="SelectAll" class="all" />All</label>
    <label><input type="checkbox" name="5" class="selector" />5</label>
    <label><input type="checkbox" name="7" class="selector" />7</label>
    <label><input type="checkbox" name="9" class="selector" />9</label>
</form>

Jquery code:

$( "#Hidden").on( "click", function() {
    $(".selector").toggle();
});

Upvotes: 1

Views: 62

Answers (4)

Michael Horn
Michael Horn

Reputation: 4099

I agree with Maarten's solution above, with the nitpick that it makes more sense to add a 'selector-hidden' class to the checkboxes and toggle that instead.

CSS:

.selector-hidden {
    display: none;
}

JQuery:

$( "#Hidden").on( "click", function() {
    $(".selector-hidden").toggle();
});

https://jsfiddle.net/pg04yhav/

This way the selectors can be styled using the 'selector' class, but be hidden by toggling the 'selector-hidden' class.

Upvotes: 0

Paul Fitzgerald
Paul Fitzgerald

Reputation: 12129

You could toggle it when the document is ready.

See updated js fiddle here.

$(document).ready(function(){

  $(".selector").toggle();
  $("#Hidden").prop('checked', true);

  $("#Hidden").on("click", function() {
     $(".selector").toggle();
  });

});

Upvotes: 1

Jon Uleis
Jon Uleis

Reputation: 18669

Here's the CSS-based solution with no JS changes.

Hide the .selector elements with display: none, but also note to add the checked attribute to your "Hidden" checkbox so the interface still makes sense (otherwise the toggle behavior will be the opposite of the Hidden checkbox). 

$("#Hidden").on("click", function() {
  $(".selector").toggle();
});
.selector {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label><input type="checkbox" id="Hidden" name="Hidden" class="hidden" checked />Hidden</label>
<form id="form1" name="form1" method="post" action="">
  <label><input type="checkbox" name="SelectAll" class="all" />All</label>
  <label><input type="checkbox" name="5" class="selector" />5</label>
  <label><input type="checkbox" name="7" class="selector" />7</label>
  <label><input type="checkbox" name="9" class="selector" />9</label>
</form>

Upvotes: 0

Maarten van Tjonger
Maarten van Tjonger

Reputation: 1927

Try hiding .selector using CSS:

.selector {
    display: none;
}

https://jsfiddle.net/o2c8z5xw/3/

Upvotes: 0

Related Questions