checkbox选中和取消，控制dom元素颜色变化
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
.bottomCheckbox {
width: 545px;
height: 35px;
padding: 7px 9px;
background: rgba(15, 60, 127, 0.9);
border-radius: 5px;
border-image: linear-gradient(0deg, rgba(86, 165, 255, 1), rgba(92, 250, 255, 1)) 10 10;
}
.bottomCheckbox p{
text-align: center;
width: 104px;
display: inline-block;
float: left;
color: #FAB21A;
}
</style>
</head>
<body>
<div class="bottomCheckbox">
<p>
<input name="bottomType" type="checkbox" value="1" checked='checked' />风险区域
</p>
<p>
<input name="bottomType" type="checkbox" value="2" checked='checked' />危险源
</p>
<p>
<input name="bottomType" type="checkbox" value="3" checked='checked' />摄像头
</p>
<p>
<input name="bottomType" type="checkbox" value="4" checked='checked' />有毒可燃
</p>
<p>
<input name="bottomType" type="checkbox" value="5" checked='checked' />应急消防
</p>
</div>
</body>
<script type="text/javascript">
//底部分类复选框取消和选中触发事件
$(".bottomCheckbox input:checkbox[name='bottomType']").click(function() {
//选中的时候
if ($(this).is(":checked") == true) {
$(this).parents("p").css('color', "#FAB21A");
} else {
//取消选择的时候
$(this).parents("p").css('color', "#fff");
}
});
</script>
</html>选中时候的颜色
取消的时候的颜色
每天记录一个简简单单的小功能~ 积少成多~~ nice~~
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
