javascript实现radio效果

最新推荐文章于 2021-10-09 11:25:27 发布

起點ing

最新推荐文章于 2021-10-09 11:25:27 发布

阅读量940

点赞数

分类专栏： Web前端——javascript 文章标签： javascript实现radio效果

本文链接：https://blog.youkuaiyun.com/zgyhh/article/details/8707240

版权

Web前端——javascript 专栏收录该内容

19 篇文章

订阅专栏

本文探讨如何利用JavaScript实现单选按钮（Radio）的交互效果，通过代码示例展示具体的实现过程，旨在促进技术交流和分享。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

好不好，你说的算！有好的交流分享。。。

<!DOCTYPE html>

<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
.lanrentuku img{border:1px solid #008800;}
</style>
</head>

<body>

<div class="lanrentuku">
<input type="radio" value= "lanrentuku" id= "111" name="aaa" style="display:none"> <img id="aa" name="myImg" src="http://www.lanrentuku.com/down/js/images/12625207690.gif " οnclick="myFun(this.id)">
<input type="radio" value= "lanrentuku" id= "222" name="aaa" style="display:none"> <img id="bb" name="myImg" src="http://www.lanrentuku.com/down/js/images/12625207691.gif" οnclick="myFun(this.id)">
</div>

</body>

<script language="JavaScript" >

function myFun (sId){
var oImg = document.getElementsByName('myImg');

for (var i = 0; i < oImg.length; i++) {

if (oImg[i].id == sId && oImg[i].previousSibling.previousSibling.checked === false) {

oImg[i].previousSibling.previousSibling.checked = true;
oImg[i].style.border = '1px solid #FF6600';
alert("你做了其他选择！");
} else {
if (oImg[i].id == sId){
oImg[i].style.border = '1px solid #FF6600';
}else{
oImg[i].style.border = '';
}
}
}

}

</script>
</html>