checkbox选中和取消，控制dom元素颜色变化

不念不忘少年蓝@ 2022-10-10 12:44 135阅读 0赞

<!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>

选中时候的颜色  
![8b6e15677e4a3d5ed4d93f6aa9732bee.png][]

取消的时候的颜色  
![89d304f0cdd13f13e4a652d4983385e5.png][]

每天记录一个简简单单的小功能~  
积少成多~~  
nice~~

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70]

[8b6e15677e4a3d5ed4d93f6aa9732bee.png]: /images/20221005/4cd47fff62bd4cdab0b8bf1ba8c18073.png
[89d304f0cdd13f13e4a652d4983385e5.png]: /images/20221005/48332828acb64a7bb16c00283fbc488c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70]: /images/20221005/4a3331938f294e62bcd4099a6c433fe4.png