the checkboxes are checked by default. if unchecked they should hide the text. how do i hide or show the text in jquery?
html:
<div class="check">
<p><input type="checkbox" value="Name" id="name" checked /> <label for="name">Name</label></p>
<p><input type="checkbox" value="Reference " id="reference" checked /> <label for="reference">Reference</label></p>
</div>
<div id="nametxt"> Show Name TEXT </div>
<div id="reftxt"> Show Ref TEXT </div>
Change the id of <div id="reftxt"> to <div id="referencetxt"> and then you can do this:
$('div.check input:checkbox').bind('change',function(){
$('#'+this.id+'txt').toggle($(this).is(':checked'));
});
The change event will fire if its clicked on or if someone uses the keyboard to check/uncheck the checkbox.
As long as the ID's of the text divs are always checkbox ID + 'txt' and are in div.check then this will handle those too. Keeps you from having to repeat yourself as you get more checkboxes.
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$("#name").click(function() {
if($('#name:checked').length) {
$("#nametxt").show();
} else {
$("#nametxt").hide();
}
});
$("#reference").click(function() {
if($('#reference:checked').length) {
$("#reftxt").show();
} else {
$("#reftxt").hide();
}
});
})
</script>
if the check box is not checked how to display a msg through the Jquery,
You must tick the site box to accept.
