Perform validation on CheckBox check/uncheck in javascript

Question

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

salesnew is the form id in which currnt div is present. New address is just other div below this it is working properly just issue is with checkbox . — Rohan
– Rohan, Commented Jul 26, 2013 at 11:32

Naveen Kumar Alone · Accepted Answer · 2013-07-26 11:38:54Z

2

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

answered Jul 26, 2013 at 11:38

Naveen Kumar Alone

7,6985 gold badges40 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

adeneo · Accepted Answer · 2013-07-26 11:30:37Z

2

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.

answered Jul 26, 2013 at 11:30

adeneo

319k29 gold badges410 silver badges392 bronze badges

Comments

Christian Kellner · Accepted Answer · 2013-07-26 11:36:08Z

0

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

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

answered Jul 26, 2013 at 11:36

Christian Kellner

7,41712 gold badges58 silver badges91 bronze badges

Comments

fidev · Accepted Answer · 2013-07-26 11:47:46Z

0

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

answered Jul 26, 2013 at 11:47

fidev

1,2523 gold badges24 silver badges53 bronze badges

Collectives™ on Stack Overflow

Perform validation on CheckBox check/uncheck in javascript

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related