当先锋百科网

首页 1 2 3 4 5 6 7

点击div即可切换单选框

今天再CSDN问答上看到个问题，点击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;})

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