checkbox如何选中时显示内容，不被选中时隐藏内容

最新推荐文章于 2023-02-08 16:42:43 发布

wangxiaohui6687

最新推荐文章于 2023-02-08 16:42:43 发布

阅读量8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.youkuaiyun.com/wangxiaohui6687/article/details/8640182

js 专栏收录该内容

20 篇文章

订阅专栏

这段HTML代码展示了如何使用JavaScript实现当checkbox被选中时隐藏特定内容，取消选中时内容重新显示。通过监听checkbox的点击事件，改变对应内容的display属性来达到效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#div1,#div2{
display:none;
}
</style>
<script type="text/javascript">
//the main function
function checkBox(cb) {
var oOne = document.getElementById("one");
var oTwo = document.getElementById("two");
var oDiv1 = document.getElementById("div1");
var oDiv2 = document.getElementById("div2");
if (cb.id=="one") {
oTwo.checked= false;
oDiv2.style.display="none"
if (cb.checked) {
oDiv1.style.display="block";
} else {
oDiv1.style.display="none";
}
} else if (cb.id=="two") {
oDiv1.checked = false;
if (cb.checked) {
oDiv2.style.display="block";
} else {
oDiv2.style.display="none";
}
oDiv1.style.display="none";
}
}

</script>
</head>

<body>
<input type="checkbox" id="one" onClick="checkBox(this);"/><label for="">111111</label><br />
<div id="div1">111111111111</div><br />
<input type="checkbox" id="two" onClick="checkBox(this);"/><label for="">22222222222</label><br />
<div id="div2">2222222</div><br />

</body>

</html>

另一种选择：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
#one{display:block;}
</style>
<script type="text/javascript">

function show(){
var oCheck = document.getElementById("check");
var oOne =document.getElementById("one");
if(oCheck.checked){
oOne.style.display = "none"
}else{
oOne.style.display = "block"
}
}
</script>
</head>

<body>
<input type="checkbox" id="check" onClick="show()"/><label for="">111111</label>
<div id="one">2222222</div>
</body>
</html>