javascript - 在 javascript 中对 CheckBox 检查/取消选中执行验证

Question

在这里，我有一个复选框，如果选中该复选框，那么我想显示一个 div，如果未选中该复选框，那么我想隐藏该 div。

下面是我的代码，它不工作请帮忙。

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

Answer 1

替换您的Javascript HomeMove 函数，如下所示

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

Answer 2

不确定document.SalesNew.HomeMove应该是什么，但您应该像这样创建一个事件处理程序：

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

此外，您没有 ID 元素NewAddress，但我猜您正在使用的实际代码中有一个元素。

Answer 3

或者，如果你想保留自己的代码，你可以这样做：

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

Answer 4

试试下面的小提琴：http: //jsfiddle.net/GtmWX/2/

显示/隐藏 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();
};