New to jQuery/Javascript and tried the above solutions. Eventually, this is what worked for me to:
- keep elements hidden upon loading page (because checkboxes = unchecked by default), and then
- have elements show/hide based on whether the checkbox is checked or not.
It's probably a little ugly/redundant/extraneous syntax-wise, but it works for now!
Note: this all goes in the following <script>
tag, right before the </body>
tag on your HTML page:
<script type="text/javascript">
// 'solution code' goes here...
</script>
'solution code':
$(document).ready(function(){
// HIDE ELEMENTS UPON PAGE LOAD (CHECKBOX = UNCHECKED)
if ($([id="show_box"]).is(':checked') == false)
$("#hiddenDiv").hide();
// SHOW/HIDE ELEMENTS VIA CHECKBOX STATUS
$('[id="show_box"]').change(function()
{
if ($(this).is(':checked'))
$("#hiddenDiv").fadeIn();
else
$("#hiddenDiv").fadeOut();
});
});
- [id="show_box"] (the checkbox, with id 'show_box')
- #hiddenDiv (the id of the element I want to hide/show)
- this (since it's nested, it ends up representing 'show_box')
And here is the HTML code on the page, which the 'solution code' is referring to:
<!-- CHECKBOX -->
<input type="checkbox" id="show_box" name="box" value="">
<!-- ELEMENT THAT SHOWS/HIDES -->
<div id="hiddenDiv"></div>
$('input.checkbox_check').checked
returnstrue
if it's checked,false
otherwisechecked
. I think you meant$('input.checkbox_check')[0].checked
checked: function(){return this.is(:checked)}
and be done with it.