Question

我试图制作一个文本框。当复选框被选中时，应该显示文本框。但是当取消选中复选框时，应该删除文本框。这是我到目前为止实现这一点的方法。当我在复选框上显示它时显示文本框。现在我想知道如果取消选中复选框，如何删除文本框

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>

Answer 1

将您的javascript功能更改为：

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

Answer 2

你可以只使用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>

Answer 3

使用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/

Answer 4

你可以用jQuery写这样的东西。 jsFiddle文件// 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
    });

});

Answer 5

只需处理复选框的checked状态

#myCheck:not(:checked)+#area {
  display: none;
}

<input type="checkbox" id="myCheck" />Add new item type

<div class="row" id="area">
  Something
</div>

根据复选框显示/隐藏文本框

5 个答案: