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

不确定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 2

将 Javascript HomeMove功能替换为

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

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

在JavaScript中检查/取消选中CheckBox上的验证

4 个答案: