CODEWITHSUNDEEP
javascripthtml
Rohan
Rohan

Reputation: 561

Perform validation on CheckBox check/uncheck in javascript

Here i have one check box if that check box is checked then i want to display one div and if that checkbox is unchecked then i want to hide that div.

Below is my code its not working please help .

<div class="row1" id="homemove"> <span class="label">Home Move</span>
    <input type="checkbox" id="homecheck" onclick="HomeMove()" </input>
</div>  

function HomeMove() {
    if (document.SalesNew.HomeMove.checked) {
        document.getElementById("NewAddress").style.display = "block";
    } else if (!document.SalesNew.HomeMove.checked) {
        document.getElementById("NewAddress").style.display = "none";
    }
}

Upvotes: 0

Views: 1242

Answers (4)

fidev
fidev

Reputation: 1252

Try out the following fiddle: http://jsfiddle.net/GtmWX/2/

Simple checkbox to show/hide div

HTML

<p>Check here to show div <input type="checkbox" name="checkbox" id="checkbox" tabindex="165" /></p>
<div id="hiddenDiv"></div>

JS

function setUp() {
document.getElementById("checkbox").onclick = function() {
    if (document.getElementById("checkbox").checked) {
        // show div
        document.getElementById("hiddenDiv").style.display = "block";
    } else {
        // hide div
        document.getElementById("hiddenDiv").style.display = "none";
    }
};
// hide on initial page load
document.getElementById("hiddenDiv").style.display = "none";
}

window.onload =  function() {
setUp();
};

Upvotes: 0

Naveen Kumar Alone
Naveen Kumar Alone

Reputation: 7678

Replace your Javascript HomeMove function as below

function HomeMove() {
    if (document.getElementById("homecheck").checked) {
        document.getElementById("NewAddress").style.display = "block";
    } else {
        document.getElementById("NewAddress").style.display = "none";
    }
}

Upvotes: 2

Christian
Christian

Reputation: 7429

Or, if you want to keep your own code, you could do it this way:

http://jsbin.com/uludes/1/edit

Upvotes: 0

adeneo
adeneo

Reputation: 318302

Not sure what document.SalesNew.HomeMove is supposed to be, but you should just create an event handler like so:

<div class="row1" id="homemove"> 
    <span class="label">Home Move</span>
    <input type="checkbox" id="homecheck"></input>
</div>

<script type="text/javascript">
    document.getElementById('homecheck').onchange = function() {
        document.getElementById("NewAddress").style.display = this.checked ? 'block' : 'none';
    }
</script>

Also, you don't have an element with the ID NewAddress, but I'm guessing there is one in the actual code you're using.

Upvotes: 2

Related Questions