修改input选中的样式

最新推荐文章于 2024-08-20 13:50:55 发布

苏小画

最新推荐文章于 2024-08-20 13:50:55 发布

阅读量1.4k

点赞数

分类专栏： jquery js

本文链接：https://blog.csdn.net/weixin_44404444/article/details/119913601

版权

js 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

jquery

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="viewport"
		content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>维保管理系统</title>
	<link href="../../css/reset.css" rel="stylesheet">
	<link href="../../css/index.css" rel="stylesheet">
	<script src="../../js/src/jquery-3.5.1.js" type="text/javascript"></script>
	<script src="../../js/src/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
	<script src="../../js/reset.js" type="text/javascript"></script>
	<script src="../../js/index.js" type="text/javascript"></script>
	<script src="../../js/layout.js" type="text/javascript"></script>
	<script src="../../js/biz.conf.js" type="text/javascript"></script>
	<script type="text/javascript"
		src="https://webapi.amap.com/maps?v=1.4.15&key=92d53f389690baefd25eedd492114fde&plugin=AMap.Autocomplete,AMap.PlaceSearch"></script>


	<script>

		// apicloud 平台
		apiready = function () {
			biz.safeAreaTop = api.safeArea.top;
			biz.safeAreaBottom = api.safeArea.bottom;
			biz.fixStatusBar($(document));
		}

	</script>
</head>

<body v-cloak>
	<div id="page" v-cloak>
		<input type="hidden" class="AutoGuid" value="" />
		<input type="hidden" class="companyId" value="" />
		<input type="hidden" class="UserId" value="" />
		<input type="hidden" class="UserMobilePhone" value="" />
		<input type="hidden" class="UserName" value="" />
		<input type="hidden" class="UserRoleId" value="" />
		<input type="hidden" class="" value="" />

		<input type="hidden" id="pageUrl" value="Home" />
		<div class="pageTitle col col-24 list_title dwz-fix-status-bar">
			<div class="edit_title">
				<a href="#">
					<img src="../../img/fan.svg" alt="">
				</a>
				<span class="two_columns">装置/设备</span>
				
			</div>
		</div>
		<div class="content col col-24" v-cloak>
			<form>

				<p>
					<input type="radio" name="sex" value="门系统" checked="checked">门系统
					<span class="cont" ></span>
				</p>
				<p><input type="radio" name="sex" value="曳引系统">曳引系统
					<span ></span>
				</p>
				<p><input type="radio" name="sex" value="控制系统">控制系统
					<span ></span>
				</p>
				<p><input type="radio" name="sex" value="安全保护装置">安全保护装置
					<span ></span>
				</p>
				<p><input type="radio" name="sex" value="其他">其他
					<span ></span>
				</p>
			</form>
		</div>
</body>


</html>
<script>
	$("[v-cloak]").removeAttr("v-cloak");
	$("p").click(function () {
		$("input[name='sex'").attr("checked", false)
		$("p span").removeClass("cont")
		console.log($(this).children("span"))
		$(this).children('input').attr("checked", "checked")
		$(this).children("span").addClass("cont")

		var inputChe=$(this).children().val()
	
		//保存在缓存中
		window.localStorage.setItem("inputChe",inputChe);
		let pList=$("p")
      for(var i=0;i<pList.length;i++){
		pList[i].click=function(){
			console.log(this)
		}
	  }
	
	})


</script>
<style>

	p {
		height: 50px;
		color: black;
		border-bottom: 1px solid #ebebeb;
		text-align: left;

		padding-left: 30px;
		font-size: 14px;
		line-height: 50px;
	}

	input {
		color: rgb(2, 1, 1);
	}

	text {
		color: #000;
	}

	body {
		color: #000;
		background: #000;
	}

	input[type=radio]:after {
		position: absolute;
		width: 12px;
		height: 18px;
		top: -1px;
		left: -11px;
		content: " ";
		color: #73B5FF;
		display: inline-block;
		visibility: visible;
		padding: 0px 3px;
		border-radius: 3px;
		border: 1px solid #73B5FF;
		border-radius: 50%;

	}
	input[type=radio]:checked:after {
    content: "";
  ;
}
p{
	position: relative;
}
.cont{
position: absolute;
display: inline-block;
width: 12px;
height: 12px;
top: 21px;
left: 23px;
background: #08B4F5;
border-radius: 50%;
z-index: 111;
}
</style>