功能：
1. 选中复选框，显示隐藏的区域；
2. 取消选中，再隐藏该显示的区域。
方法1：在layui + jquery框架下
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选中checkbox复选框，显示某区域</title>
<!-- 引入layui的核心css -->
<link rel="stylesheet" href="../layui/css/layui.css">
</head>
<body>
<form action="" class="layui-form">
<div class="layui-form-item">
<label for="" class="layui-form-label" id="show_hide">显示</label>
<div class="layui-input-inline">
<input type="checkbox" name="isShow" id="isShow" lay-skin="primary" lay-filter="isShow" title="江苏省" class="layui-input">
</div>
</div>
<!-- 页面初始时（未选中复选框），城市这部分内容进行隐藏 display:none; -->
<div class="layui-form-item" id="city_div" style="display: none;">
<label for="" class="layui-form-label">城市</label>
<div class="layui-input-inline">
<select name="city" id="city">
<option value="0">--城市--</option>
<option value="1">南京</option>
<option value="2">苏州</option>
<option value="3">扬州</option>
<option value="4">无锡</option>
</select>
</div>
</div>
</form>
<!-- 引入核心js -->
<script src="../js/jquery.min.js"></script>
<script src="../layui/layui.js"></script>
<script>
$(function(){
layui.use(['form'], function(){
var form = layui.form;
form.render('checkbox');
form.render('select');
form.on('checkbox(isShow)', function(data){
var isChecked = data.elem.checked;
var check = data.elem;
if(isChecked)
{ //选中复选框，显示city内容
$('#city_div').css("display", "block");
$('#show_hide').html("隐藏");
}
else
{ //取消选中，隐藏city内容
$('#city_div').css("display", "none");
$('#show_hide').html("显示");
}
});
});
})
</script>
</body>
</html>运行效果图：
方法2：纯粹的HTML+CSS+JavaScript
代码入下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选中checkbox复选框,显示某区域</title>
<!-- 无任何框架，纯粹HTML+CSS+JavaScript -->
</head>
<body>
<form action="">
<div>
<label for="" style="float: left; width: 95px; text-align: center;" id="show_hide">显示</label>
<div style="float: left; margin-left: 5px;">
<input type="checkbox" name="isShow" id="isShow">属于江苏省
</div>
</div>
<br>
<div style="display: none;" id="showCity">
<label for="" style="float: left; width: 95px; text-align: center;">城市</label>
<div style="float: left; margin-left: 10px;">
<select name="city" id="city">
<option value="0">--城市--</option>
<option value="1">南京</option>
<option value="2">苏州</option>
<option value="3">无锡</option>
<option value="4">扬州</option>
</select>
</div>
</div>
</form>
<!-- js核心代码 -->
<script>
var checkbox = document.getElementById('isShow');
var city = document.getElementById('showCity');
var show_hide = document.getElementById("show_hide");
checkbox.addEventListener("click", function(){
if(checkbox.checked)
{
city.style.display = 'block';
show_hide.innerHTML = '隐藏';
}
else
{
city.style.display = 'none';
show_hide.innerHTML = '显示';
}
});
</script>
</body>
</html>运行效果图：
文章来源：https://www.toymoban.com/news/detail-689564.html
文章来源地址https://www.toymoban.com/news/detail-689564.html
到了这里，关于【点击checkbox复选框，显示or隐藏某区域】的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
