I decided to post an answer on how to do that exact same thing without jQuery. Just because I'm a rebel.
var ageCheckbox = document.getElementById('isAgeSelected');
var ageInput = document.getElementById('txtAge');
// Just because of IE <333
ageCheckbox.onchange = function() {
// Check if the checkbox is checked, and show/hide the text field.
ageInput.hidden = this.checked ? false : true;
};
First you get both elements by their ID. Then you assign the checkboxe's onchange
event a function that checks whether the checkbox got checked and sets the hidden
property of the age text field appropriately. In that example using the ternary operator.
Here is a fiddle for you to test it.
Addendum
If cross-browser compatibility is an issue then I propose to set the CSS display
property to none and inline.
elem.style.display = this.checked ? 'inline' : 'none';
Slower but cross-browser compatible.
$('#isAgeSelected').change(function(){ alert($('#chkSelect').attr('checked')); });
– Khaled.K May 14 '14 at 5:43$('#isAgeSelected').checked
– mmcrae Oct 27 '15 at 14:52$('#isAgeSelected')[0].checked
– Felipe Leão Jun 20 '16 at 19:36