web前端：javascript+css做出好看的单选框

          web前端：javascript+css做出好看的单选框

 

前言：浏览器自带的type=radio所表现的单选框有多丑就不必展示了，反正都是丑，怎么看怎么和越来越讲究设计感的网页格格不入，既然如此，倒不如使用CSS+DIV+JAVASCRIPT自己设计一个单选框的样式，只要功能实现了，管它样式如何瞒天过海去！

弱弱的效果图：

分别贴出CSS/DIV以及JAVASCRIPT部分的代码：

首先是CSS样式：由于采用了圆角的设计，用IE6的只能暂时憋屈了:(

.radiocon {
    width: 60px;
    height: 35px;
    float: left;
    margin-left: 15px
}

.radiocon label {
    line-height: 25px;
    padding-left: 10px;
    float: left;
    margin-right: 5px;
    width: 50px;
}

.outroll {
    width: 14px;
    height: 14px;
    border: 5px solid #0ABBCA;
    border-radius: 12px;
    float: left;
    background: #fff
}

.gender_radio {
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background: #0ABBCA;
    line-height: 12px;
    float: left;
    margin: 3px;
}

.addInputEle {
    width: 400px;
    height: 45px;
    margin-left: 30px;
}

 

然后，是由两个浮动的div精心伪装而成的单选框

<div class="addInputEle">
    <label>性 别</label>
    <div class="radiocon">
		<div class="outroll">
			<input type="radio" value="男" name="gender" id="male" />
        <div class="gender_radio"></div>
        </div>
        <label for="male" class="emp_gender_name">男</label>
        </div>

	<div class="radiocon">
        <div class="outroll" >
			<input type="radio" value="女" name="gender" id="female"/>
		</div>
        <label for="female" class="emp_gender_name">女</label>
        </div>
</div>

 

最后是由Javascript来判断单选框的状态，值传递，以及控制外部样式。为了函数的重用，进行了必要的方法封装。至于没有form表单的状态下如何向后台传递input标签的值，我想大家懂ajax的都该明白，不懂的，说了也不明白。

//对单个节点对象添加现代事件封装
function addEvent(obj, type, func, useCapture) {       //对象，事件类型，事件函数，回溯或冒泡
    if (window.addEventListener) { // Mozilla, Netscape, Firefox
        //element.addEventListener(type,listener,useCapture);
        obj.addEventListener(type, func, useCapture);
    } else { // IE
        obj.attachEvent("on" + type, func);
    }
}
//	通过类获取节点函数封装
var d = document;
function getByClass(node, classname) {//参数为节点对象，类名
    if (node.getElementsByClassName) {  //Dom整容
        return node.getElementsByClassName(classname);
    } else {                    //IE
        var results = [];
        var elems = node.getElementsByTagName("*");
        for (var i = 0; i < elems.length; i++) {
            if (elems[i].className.indexOf(classname) != -1) {
                results[results.length] = elems[i];
            }
        }
        return results;            //返回节点列表
    }
}
//radio控件控制函数
function radioControl() {
    var obj = getByClass(document, "outroll");
    for (var i = 0; i < obj.length; i++) {
        var input = obj[i].getElementsByTagName("input")[0];
        input.style.display = "none";
        addEvent(obj[i], "click", checkdiv, true);
    }
}
function checkdiv(event) {
    var oEvent = event || window.event;
    var obj = oEvent.target || oEvent.srcElement;
    var classname = obj.getAttribute("class");
    if (classname != "outroll") {
        obj = obj.parentNode;
    }
    var input = obj.getElementsByTagName("input")[0];
    var name = input.name;
    var namelist = document.getElementsByName(name);
    var childnodes = getByClass(obj, "gender_radio");
    if (!childnodes.length) {
        for (var j = 0; j < namelist.length; j++) {
            namelist[j].checked = false;
            var obj2 = namelist[j].parentNode;
            var obj2child = getByClass(obj2, "gender_radio");
            if (obj2child.length) {
                obj2.removeChild(obj2child[0]);
            }
        }
        input.checked = true;
        var newobj = document.createElement("div");
        newobj.setAttribute("class", "gender_radio");
        obj.appendChild(newobj);
    }
}