点击div即可切换单选框

最新推荐文章于 2023-02-27 22:29:46 发布

一只成序源

最新推荐文章于 2023-02-27 22:29:46 发布

阅读量1.1k

点赞数 1

本文链接：https://blog.youkuaiyun.com/qq_41191401/article/details/95358330

版权

今天再优快云问答上看到个问题，点击li同时改变单选框的checked状态。

最开始思路使用jQuery的attr（）和removeAttr（）两个方法实现。后来发现问题，removeAttr（）去掉checked属性，但是单选框的选中点依旧没有去掉。但是dom结构中已经没有了checked属性，给人一种网页没有重绘的感觉。于是在网上找了下答案，自己再改了一些。感觉这个问题以后也有可能遇到，所以记录下。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#li1{
				background-color: red;
				width: 100px;
			}
			#li2{
				background-color: blue;
				width: 100px;
			}
			#li3{
				background-color: cyan;
				width: 100px;
			}
		</style>
	</head>
	 <script type="text/javascript" src="jquery-1.11.0.js" ></script>
	<body>
		<div>
			<ul>
				<li>
					<div id="li1" value="1" onclick="li1()">
						<input id="pay1" type="radio" name="pay" value="1"/>
					</div>
				</li>
				<li>
					<div id="li2" value="2" onclick="li2()">
						<input id="pay2" type="radio" name="pay" value="2"/>
					</div>
				</li>
				<li>
					<div id="li3" value="3" onclick="li3()">
						<input id="pay3" type="radio" name="pay" value="3" />
					</div>
				</li>
			</ul>
		</div>
	</body>
	<script>
		//取消选中方法
		function discheck(){
			var inputList = document.getElementsByName("pay");
　　			for(var x=0;x<inputList.length;x++){
　　　　		inputList[x].checked=false;  
			}
		}
		function li1(){
			discheck();
　　			var input = document.getElementById("pay1");
　　			input.checked = true;  　
		}
		function li2(){
			discheck();
　　			var input = document.getElementById("pay2");
　　			input.checked = true;  　
		}
		function li3(){
			discheck();
　　			var input = document.getElementById("pay3");
　　			input.checked = true;  　　
		}
	</script>
</html>

这个主要是通过遍历所有的input然后全部变成false；再重新做选择某个input加checked属性。用的都是原生的js。我回去找个时间用jQuery整整，看看能不能减少一点代码。

jQuery修订：

	function discheck(){
		const radioList=$(":radio");
		for(let radio in radioList){
			radio.checked=false;
		}
		}
		$("#li1").on("click",function(){
			discheck();
			let input=document.getElementById("pay1");
			input.checked =true;
		})
		$("#li2").on("click",function(){
			discheck();
			let input=document.getElementById("pay2");
			input.checked =true;
		})
		$("#li3").on("click",function(){
			discheck();
			let input=document.getElementById("pay3");
			input.checked =true;
		})

只能修成这样，希望有打算指点一二。。。。。