表单中的Radio切换效果

最新推荐文章于 2021-01-12 11:32:32 发布
最新推荐文章于 2021-01-12 11:32:32 发布
阅读量249 收藏
点赞数
文章标签： xhtml javascript ViewUI
  • 表单中的Radio单选框切换效果，当选中某个单选框的时候，所属范围会一同变换，我觉得大家应该收藏一下，以前想用的时候苦苦叫不上这种效果的名字，现在长到了，而且实现起来竟然如此简单，有些地方要注意，获取标签名为myradio的标签。


点击(此处)折叠或打开

  1. <!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
  2. <html xmlns=\"http://www.w3.org/1999/xhtml\">
  3. <head>
  4. <meta http-equiv=\"Content-Type\" content=\"text/html; charset=gb2312\" />
  5. <title>Radio切换效果</title>
  6. <style>
  7. *{margin:0;padding:0;}
  8. body{margin:50px;font-size:12px;color:#666;}
  9. li{list-style:none;}
  10. div{width:210px;}
  11. #tab1 ,#tab2{width:398px;height:34px;border:1px #cfedff solid;border-bottom:0;background:url(images/title.gif) repeat-x;}
  12. #tab1 ul ,#tab2 ul{margin:0;padding:0;}
  13. #tab1 li,#tab2 li{float:left;padding:0 30px;height:34px;line-height:34px;text-align:center;border-right:1px #ebf7ff solid;cursor:pointer;}
  14. #tab1 li.now,#tab2 li.now{color:#5299c4;background:#fff;font-weight:bold;}
  15. .tablist{width:378px;height:100px;padding:10px;font-size:14px;line-height:24px;border:1px #cfedff solid;border-top:0;display:none;}
  16. .block{display:block;}
  17. </style>
  18. </head>
  19. <body>
  20. <h1>Radio切换</h1>
  21. <style type=\"text/css\">
  22.     fieldset{width:378px;border:1px #B0C0D1 solid;padding:10px;}
  23.     legend{background:#B0C0D1;padding:4px 10px;color:#fff;}
  24.     #c{margin-top:10px;}
  25.     .c1,.c2{width:378px;line-height:20px;}
  26.     .c1{color:#014CC9;}
  27.     .c2{color:#7E6095;}
  28.     h3{font-size:16px;padding:5px 0;}
  29.     .red{color:#BD0A01;}
  30. </style>
  31. <script type=\"text/javascript\">
  32. function radioShow(){
  33.     var myradio=document.getElementsByName(\"myradio\");
  34.     var div=document.getElementById(\"c\").getElementsByTagName(\"div\");
  35.     for(i=0;i<div.length;i++){
  36.         if(myradio[i].checked){
  37.             div[i].style.display=\"block\";
  38.             }
  39.             else{
  40.             div[i].style.display=\"none\";
  41.             }
  42.         }
  43.     }
  44. </script>
  45. <form name=\"ck\">
  46. <fieldset>
  47.     <legend>I\


来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/29737856/viewspace-1226042/，如需转载，请注明出处，否则将追究法律责任。

转载于:http://blog.itpub.net/29737856/viewspace-1226042/

cuikuang6306
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
点击radio单选按钮切换显示不同内容
04-12
radio和mysql的关系_radio切换切换状态 mysql语句还能有更好的写法么
weixin_39900608的博客
01-20 47
不必要更新所有数据，因为如果更新很多其他无用的数据的话，后期如果数据很多，会有很多的资源浪费，因为你一次操作最多是2条数据状态的切换，比如，当前选中的是4，你想切换到25，其实是4的state变成0，25的state变成1.所以，你只需要向后台传一个这样的json：{4:0,25:1}json_decode 转换之后的数组格式为这样$req = [4=>0,25=>1]然后foreac...
radio切换，点击方法onclick
weixin_33696106的博客
07-18 723
&lt;label&gt;&lt;input name="Status1" type="radio" value="first" checked="checked" onclick="firstfactorChange()" /&gt;篮球&lt;/label&gt; &lt;label&gt;&lt;input name="S
HTML使用Radio Input来实现Tab切换
Quincylk的专栏
12-06 2791
在开发中看见仅使用css技巧，就用HTML的Radio Input来实现的Tab的切换，连click事件都未使用。代码效果如下： &lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;header&gt; &lt;link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/f...
radio 切换内容
weixin_30642267的博客
10-22 156
<!DOCTYPE html><html><head> <meta charset=utf-8 /> <title>test</title> <script type="text/javascript"> window.onload = function() { var radios = document...
js实现表单Radio切换效果的方法
10-23
主要介绍了js实现表单Radio切换效果的方法,涉及javascript实现页面元素的隐藏与显示及复选框的遍历技巧,具有一定参考借鉴价值,需要的朋友可以参考下
WEB网页radio按钮美化仿开关效果二合一jquery特效
05-22
WEB网页radio按钮美化仿开关效果二合一 1.利用jQuery技术支持，点击开启/关闭平滑切换 2.适用于PC端网页或手机端网页表单美化应用 3.实用性强，适合网页前端设计师使用 4.资源提供CSDN供下载，用于学习和交流或商用...
ExtJS如何设置与获取radio控件的选取状态
12-02
在实际应用中，Radio控件通常与表单（`Ext.form.Panel`）一起使用，可以嵌入到`items`数组中，并与其他表单字段配合，形成用户交互界面。同时，你可能需要监听`change`事件来处理用户的选择变化，例如： ```...
HTML5 SVG液态表单动画特效
07-24
3. 表单元素：在HTML5中，表单元素如单选按钮（`<input type="radio">`）、切换按钮（通常用`<input type="checkbox">`模拟）和提交按钮（`<input type="submit">`）得到了优化，提供了更好的默认样式和更多的自定义...
radio 自定义样式切换
weixin_34194359的博客
04-14 109
简单代码 <style> .payclass{ width:115px;height:37px;background-color:#e1e1e1;border:solid 1...
js单选radio切换
08-11
js 单选 radio切换div
vue 表单之通过v-model绑定单选按钮radio
10-17
主要介绍了vue 表单之v-model绑定单选按钮radio的实例代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
用ivew写一个弹窗组件，根据单选框按钮显示不同内容
Lpd_Reason的博客
01-25 908
modal: &lt;modal v-model="showSumbitDefectModalValue" width="700px" :closable='false' :mask-closable='false' &gt; &lt;div class="sumbit-ddefect-common-modal-head...
iview 表格 某一列中设置radio
weixin_30725467的博客
05-25 539
在iview 表格 某一列中设置radio，说白了还是要在render中添加，方法为： { title: '业务参数设置', // key: 'pyCode', align: 'center', render:(h, params) => { retur...
jsp通过选中radio进入不同的form.action
ziv139的专栏
08-31 1473
<% session.invalidate(); %> Untitled Document function sentWord() { targetForm = document.forms[0]; targetForm.action = "searchSentResult.jsp"; } function sensitiveWord() {
关于radio的切换问题以及获得选中值的问题
风华绝代的博客
09-06 1117
class="menu_p">菜单类型: name="type" type="radio" value="0" menu.type ?if_exists?number==0>checked="checked" />目录 name="type" type="radio" value="1" menu.type ?if_exists?number==1>checked="checked
radio单选框动态切换
向宇
01-12 1371
废话不多说直接上代码 html代码 <div class="layui-col-md10"> <input type="radio" name="pay_status" value="0" checked> <input type="radio" name="pay_status" value="1"> <input type="radio" name="pay_status" value="2"> <input
radio中性别选择切换
weixin_46137478的博客
06-03 407
1、第一步 2、第二步：在data中进行声明 3、第三步：声明这个切换的方法 效果图如下
表单中的radio按钮组提交
最新发布
06-06
表单中的radio按钮组提交通常需要使用JavaScript来实现。以下是一个基本的示例代码： HTML代码： ``` <input type="radio" name="gender" value="male"> Male <input type="radio" name="gender" value=...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值