显示/隐藏基于复选框的文本框

Show/hide text box based on check box

本文关键字：文本 复选框 隐藏 显示      更新时间：2023-09-26

我正在尝试制作一个文本框。当复选框被选中时，应该显示文本框。但当复选框未选中时，文本框应被删除。这就是我到目前为止如何实现这一点。当我点击复选框，它显示文本框。现在我想知道当复选框未选中时如何删除文本框

javascript如下

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

HTML如下

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

我想显示以下形式

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

修改你的javascript函数:

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

你可以只使用CSS，根本不需要JS，只要得到正确的选择器，在这种情况下，我使用+:

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

使用jQuery的toggle()或这个JavaScript函数(来源:http://www.dustindiaz.com/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:我编辑了你的小提琴:http://jsfiddle.net/5h7ynca0/1/

您可以使用jQuery编写类似的内容。jsFiddle File//http://jsfiddle.net/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
    });
});

刚刚处理了复选框的checked状态

#myCheck:not(:checked)+#area {
  display: none;
}
<input type="checkbox" id="myCheck" />Add new item type
<div class="row" id="area">
  Something
</div>

相关文章：