功能：
1. 選中復(fù)選框，顯示隱藏的區(qū)域；
2. 取消選中，再隱藏該顯示的區(qū)域。
方法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復(fù)選框，顯示某區(qū)域</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>
<!-- 頁面初始時（未選中復(fù)選框），城市這部分內(nèi)容進(jìn)行隱藏 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)
{ //選中復(fù)選框，顯示city內(nèi)容
$('#city_div').css("display", "block");
$('#show_hide').html("隱藏");
}
else
{ //取消選中，隱藏city內(nèi)容
$('#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復(fù)選框,顯示某區(qū)域</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>運行效果圖：
文章來源：http://www.zghlxwxcb.cn/news/detail-689564.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-689564.html
到了這里，關(guān)于【點擊checkbox復(fù)選框，顯示or隱藏某區(qū)域】的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
