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