Show/hide Text Box Based On Check Box

i`m trying to make a textbox. when check box is checked text box should be shown.but when check box is unchecked text box should be remove.This is how i implement this so far.When

Solution 1:

Change your javascript function to this:

functionaddbox() {
    if (document.getElementById('myCheck').checked) {
        document.getElementById('area').style.display = 'block';
    } else {
        document.getElementById('area').style.display = 'none';
    }
}

Solution 2:

You can do it with CSS only, no JS needed at all, just get the right selector, in this case I used +:

#myCheck:checked + #area {
  display: block !important;
}

<inputtype="checkbox"id="myCheck" />
Add new item type

<divclass="row"id="area"style="display: none;" >
Something
</div>

Solution 3:

Use jQuery toggle() or this JavaScript function (Source: http://www.dustindiaz.com/seven-togglers/)

document.getElementById("myCheck").addEventListener("click", function() {
    toggle('area');
});

functiontoggle(obj) {
    var el = document.getElementById(obj);
    el.style.display = (el.style.display != 'none' ? 'none' : '' );
}

@Richard Hamilton: I edited your fiddle: http://jsfiddle.net/5h7ynca0/1/

Solution 4:

You could write something like this with jQuery. jsFiddle File // http://jsfiddle.net/breezy/5q2vm06a/

$('#area').hide();

functioncheckval() {

    if ($('#myCheck').is(':checked')) {
        alert('is checked');
        $('#area').show();
    } else {
        $('#area').hide();
    }

}

$(function () {
    checkval(); // this is launched on load
    $('#myCheck').click(function () {
        checkval(); // this is launched on checkbox click
    });

});