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 i clikc on check box it is showing text box. now i want to know how to remove textbox when check box is unchecked

javascript as follow

<script type="text/javascript">
function addbox() {
document.getElementById('area').style.display = 'block';
}
</script>

HTML as follow

<input type="checkbox" id="myCheck"  onclick="addbox();" on>Add new item type

i want to show following form

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

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 i clikc on check box it is showing text box. now i want to know how to remove textbox when check box is unchecked

javascript as follow

<script type="text/javascript">
function addbox() {
document.getElementById('area').style.display = 'block';
}
</script>

HTML as follow

<input type="checkbox" id="myCheck"  onclick="addbox();" on>Add new item type

i want to show following form

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

• javascript
• html

• You should specify if you want to create a textbox dinamically or you want to show or hide a div with a text inside. Creating a textbox is very different from just showing or hiding a div. What do you want to do? – Fabiano Commented Sep 24, 2015 at 16:26

5 Answers 5

Change your javascript function to this:

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

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;
}

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

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

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

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

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

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

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

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

function checkval() {

    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
    });

});

Just handled checked state of checkbox

#myCheck:not(:checked)+#area {
  display: none;
}

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

<div class="row" id="area">
  Something
</div>