HTML下使用Radio设置选择样式。

最新推荐文章于 2022-04-26 17:53:22 发布

sdsxc

最新推荐文章于 2022-04-26 17:53:22 发布

阅读量5.2k

点赞数

本文链接：https://blog.csdn.net/energeticsunxiaocong/article/details/51422598

版权

有时候我们想在支付页面设置多个支付样式，方便用户勾选，但是如果只是简单使用radio就不是很直观，就几个字，支付宝，网银在线的。不够直观。

所以就想做这么一个效果。

怎么还打了水印了。

我把代码发一下方便后期的使用。

直接把压缩包也发一下。这里不能发压缩包呢。那我就直接发代码了，不发压缩包了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>支付方式选择</title>
<style type="text/css">
.on{margin:5px;border:3px solid #F60;filter:alpha(Opacity=100)}
.off{margin:5px;border:1px solid #CCC;filter:alpha(Opacity=20)}
</style>
</head>

<body>
<script language="javascript">
    function aa(a, b, c) {
        //document.form1.img.value = a;
        if(a==1)
        {
        	document.getElementById("selectedinput").value="ZFB";
        }
        else if(a==2)
        {
          document.getElementById("selectedinput").value="WYZX";
        }
        document.getElementById("ZFMethods").getElementsByTagName("img")[a - 1].className = "on";
        document.getElementById("ZFMethods").getElementsByTagName("img")[b - 1].className = "off";
        document.getElementById("ZFMethods").getElementsByTagName("img")[c - 1].className = "off";
    }
  
</script>
<h1>ddddddddddddddddddddddddddddddddd</h1>
<h1>ddddddddddddddddddddddddddddddddd</h1>
<h1>ddddddddddddddddddddddddddddddddd</h1>
<h1>ddddddddddddddddddddddddddddddddd</h1>
<div id="ZFMethods">
<a><img border="0" src="ZFB.jpg"  name="01" οnclick=aa(1,2,3); class="off"></a>
<a><img border="0" src="WYZX.jpg"  name="02" οnclick=aa(2,1,3); class="off"></a>
</div>
<input type=text id="selectedinput" value="这是选中的支付方式">


</body>
</html>

sdsxc

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML下使用Radio设置选择样式。

有时候我们想在支付页面设置多个支付样式，方便用户勾选，但是如果只是简单使用radio就不是很直观，就几个字，支付宝，网银在线的。不够直观。所以就想做这么一个效果。怎么还打了水印了。我把代码发一下方便后期的使用。直接把压缩包也发一下。这里不能发压缩包呢。那我就直接发代码了，不发压缩包了。支付方式选择.on{margin:5px;border:3px s
复制链接

扫一扫