Reputation: 123
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
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
Reputation: 12129
You could toggle
it when the document is ready.
$(document).ready(function(){
$(".selector").toggle();
$("#Hidden").prop('checked', true);
$("#Hidden").on("click", function() {
$(".selector").toggle();
});
});
Upvotes: 1
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
Reputation: 1927
Try hiding .selector
using CSS:
.selector {
display: none;
}
https://jsfiddle.net/o2c8z5xw/3/
Upvotes: 0