原生javascript自定义input[type=radio]效果示例
本文实例讲述了原生javascript自定义input[type=radio]效果。分享给大家供大家参考，具体如下：
找到最为简单的仅仅使用css3的方案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
input[type="radio"]+label::before {
content: "";
/*不换行空格*/
display: inline-block;
vertical-align: middle;
font-size: 18px;
width: 10px;
height: 10px;
margin-right: 10px;
border-radius: 50%;
border: 2px solid #01cd78;
text-indent: 15px;
line-height: 1;
padding: 4px;
}
input[type="radio"]:checked+label::before {
background-color: #01cd78;
background-clip: content-box;
}
input[type="radio"] {
position: absolute;
clip: rect(0, 0, 0, 0);
}
</style>
</head>
<body>
<div class="female">
<input type="radio" id="female" name="sex" checked="" />
<label for="female">女</label>
</div>
<div class="male">
<input type="radio" id="male" name="sex" />
<label for="male">男</label>
</div>
</body>
</html>
在最近的一次开发中，或者在之前的开发中，经常性的用到单选框这个form表单元素。而ui给出的设计方案绝对也不是原生的radio样式，面对这种场景，自定义radio效果成为一种解决方案。
直接上图，如下
测试代码，如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义radio和checkbox</title>
<style type="text/css">
#ceshi label input {
display: none;
}
#ceshi label span {
display: inline-block;
width: 18px;
height: 18px;
border-radius: 50%;
border: 2px solid #ddd;
box-sizing: border-box;
position: relative;
top: 3px;
margin-right: 6px;
}
#ceshi label span.active {
border: 3px solid red;
}
</style>
</head>
<body>
<form id="ceshi" action="test.php" method="get">
<label>
<span></span>
<input type="radio" name="t" value="这是测试1">这是测试1
</label>
<label>
<span></span>
<input type="radio" name="t" value="这是测试2">这是测试2
</label>
<label>
<span></span>
<input type="radio" name="t" value="这是测试3">这是测试3
</label>
<input type="submit" name="" value="提交">
</form>
<script type="text/javascript">
Object.prototype.siblings = function() {
var arr = []; //保存兄弟节点
var prev = this.previousSibling; //o的前一个同胞节点
//先往上查询兄弟节点
while (prev) {
if (prev.nodeType == 1 && prev.tagName == this.tagName) {
arr.unshift(prev); //数组首部插入数组，保证节点顺序
}
prev = prev.previousSibling; //把上一节点赋值给prev
}
//往下查询兄弟节点
var next = this.nextSibling; //o的后一个同胞节点
while (next) {
if (next.nodeType == 1 && next.tagName == this.tagName) {
arr.push(next); //数组尾部插入，保证节点顺序
}
next = next.nextSibling; //下一节点赋值给next，用于循环
}
return arr;
}
//判断HTMLElement是否含有某个class
Object.prototype.hasClass = function(cls) {
return this.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}
//HTMLElement对象添加类
Object.prototype.addClass = function(cls) {
if (!this.hasClass(cls)) this.className += " " + cls;
}
//HTMLElement对象删除类
Object.prototype.removeClass = function(cls) {
if (this.hasClass(cls)) {
var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
this.className = this.className.replace(reg, ' ');
}
}
function nativeSelfRadio(dom) {
dom.getElementsByTagName("span")[0].addClass("active");
dom.siblings().forEach(function(ele, val) {
ele.getElementsByTagName("span")[0].removeClass('active');
//ele.getElementsByTagName("span")[0].classList.remove('active');
})
}
//绑定事件
var len=document.getElementById("ceshi").getElementsByTagName("label");
for (var i = 0; i < len.length; i++) {
len[i].getElementsByTagName("input")[0].checked=false;//设置不选中
len[i].onclick=function(){
nativeSelfRadio(this);
}
}
</script>
</body>
</html>
最初开发时候，也习惯了用jquery，但慢慢也意识到原生不熟走不远的道理，于是开始各种原生实现。上述测试代码均采用原生js实现；
本人觉得需要关注的地方有：
1）、函数挂载的原型对象是HTMLElement，实际原型对象写为Object也是可以的
2）、添加或者删除类可以自己来写，也可以用HTML5的接口classList，添加或者删除类
3）、避免返回该页面，radio依然为选中状态，需要加载完页面后将radio选中状态设置为false，如果业务需要单独选中哪个，就需要定制了
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于JavaScript相关内容可查看本站专题：《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关推荐
-
js获取RadioButtonList的Value/Text及选中值等信息实现代码
HTML代码 复制代码 代码如下: <asp:RadioButtonList ID="rbtnCompany" runat="server" RepeatColumns="4" RepeatDirection="horizontal"> <asp:ListItem Value="1" Text="A"></</SPAN>asp:ListItem&
-
js实现的简单radio背景颜色选择器代码
本文实例讲述了js实现的简单radio背景颜色选择器.分享给大家供大家参考.具体如下: 这里演示的js实现radio网页背景颜色选择器,只需点击对应颜色的radio单选框,就可以改变网页的背景颜色,简单方便,实用的javaScript网页特效. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/js-radio-cha-bgcolor-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT
-
利用JavaScript更改input中radio和checkbox样式
本文涉及到的图片 body { margin: 0px; padding: 0px; font-size: 13px; } .input_style { padding: 6px 0px; width: 600px; margin: 0px auto; border-bottom: #666666 1px dotted; } .input_style span { display: inline-block; width: 15px; height: 15px; text-align: left
-
js获取 type=radio 值的方法
复制代码 代码如下: <ul> <li> <input type="radio" name="radio" value="前台支付 " id="radio" />前台支付 --如需整晚保留,请预付房费. </li> <li> <input type="radio" name="radio" value="担保支付
-
js实现动态改变radio状态的方法
h5的radio是自带选中状态改变的,但是如果自带的状态无法满足自己的需求时,就需要自己去实现. 代码如下: h5部分代码 <p class="group"> <label class="active"> <input type="radio" name="parent_radio" value="1" id="new_data" onclick="
-
纯JS打造网页中checkbox和radio的美化效果
图片素材: 效果图: <head> <style> BODY { FONT-FAMILY: "Segoe UI", Frutiger, Tahoma, Helvetica, "Helvetica Neue", Arial, sans-serif; FONT-SIZE:62.5% } LABEL { MARGIN-RIGHT: 1.2em } .custom-checkbox { POSITION: relative } .custom-rad
-
js实现表单Radio切换效果的方法
本文实例讲述了js实现表单Radio切换效果的方法.分享给大家供大家参考.具体如下: 这里基于js实现表单中的Radio单选框切换效果,当选中某个单选框的时候,所属范围会一同变换,我觉得大家应该收藏一下,以前想用的时候苦苦叫不上这种效果的名字,现在找到了,而且实现起来竟然如此简单,有些地方要注意,获取标签名为myradio的标签. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-table-radio-cha-codes/ 具体代码如下:
-
JS实现的radio图片选择按钮效果
用JS实现的radio图片选择按钮效果.注意:input后面的空格.用到的图片: 用JS实现的radio图片选择按钮效果-我们 .lanrentuku img{border:1px solid #008800;} function myFun(sId) { var oImg = document.getElementsByTagName('img'); for (var i = 0; i 用JS实现的radio图片选择按钮效果. 注意:input后面的空格. 查找更多代码,请访问:我们 [Ctr
-
javascript radio 联动效果
<script> function checkradio(o,x){ document.getElementsByName("inptB")[x-1].checked=o.checked } </script> <input name="inptA" type="radio" id="inptA" onclick="checkradio(this,1)">aaa <
-
JS实现点击Radio动态更新table数据
tbody定义一个标签 当上面变化的,在js里面做拼接就行了,拼接结束 tbody.html(XXX) <script type="text/javascript"> $(function(){ var quotas = { 1:{name:"工商银行",oneTime:1000}, 2:{name:"农业银行",oneTime:800}, 3:{name:"中国银行",oneTime:2000}, 4:{name