radio和checkbox例子

最新推荐文章于 2022-08-02 10:42:55 发布

大大大v

最新推荐文章于 2022-08-02 10:42:55 发布

阅读量615

点赞数

文章标签： web 界面

本文链接：https://blog.csdn.net/yymonkeydo/article/details/78732818

版权

web前端界面专栏收录该内容

5 篇文章 0 订阅

订阅专栏

radioDemo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单美化_单选按钮</title>
    <style>
        div,dl,dt,dd,a{padding:0;margin:0;}
        body{font: 12px/22px "微软雅黑";}
        a{color:black;text-decoration:none;}
        .type{width:400px;height:32px;border:1px solid #DFDFDF;margin:30px auto;}
        .type dl{height: 32px;line-height:32px;padding-left:15px; }
        .type dt{float:left;}
        .type dd{float:left;margin:0 10px 0 8px; }
        .type dd a{display:block;position:relative;padding-left:23px;}
        .type dd a:hover {color:#cc0000; text-decoration:underline;}
        .type dd b{display:block;width:20px;height:20px;background:url(radiobutton.gif) no-repeat -14px -18px;position:absolute;top:6px;left:0;}
        .type dd a:hover b{background-position:-14px -118px;}
        .type .selected b,.type .selected a:hover b{background-position:-14px -218px;}
    </style>
    <script>
        function show(index){
            var dd = document.getElementById("type").getElementsByTagName("dd");
            for(var i = 0; i < dd.length; i++){
                if(i === index){
                    dd[i].className = 'selected';
                }else {
                    dd[i].className = null;
                }
            }
        }
    </script>
</head>
<body>
    <div>
        <form action="#" method="post" name="typeForm">
            <label>配送类型：</label>
            <input type="radio" name="type" checked="checked"/><label>全部</label>
            <input type="radio" name="type"/><label>京东配送</label>
            <input type="radio" name="type"/><label>第三方配送</label>
        </form>
        下面用dl来替换 全部，京东配送，第三方配送都是对配送类型的说明<br/>
        浮动的时候，高度没了，所以有时候还是要加一下高度的<br/>
        b可以作为占位的标签<br/>
        图片偏移：先水平后垂直<br/><br/>
        点击的时候，选中的改变className，未选中的还原吧<br/>
    </div>
    <div class="type">
        <dl id="type">
            <dt>配送类型</dt>
            <dd class="selected" οnclick="show(0)"><a href="#"><b></b>全部</a></dd>
            <dd><a href="#" οnclick="show(1)"><b></b>京东配送</a></dd>
            <dd><a href="#" οnclick="show(2)"><b></b>第三方配送</a></dd>
        </dl>
    </div>
</body>
</html>

checkboxDemo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复选框例子</title>
    <style>
        div,form,ul,li,input,label,b{padding:0;margin:0}
        li{list-style: none;}
        body{font:13px/26px "微软雅黑";}
        .typeList{width:340px;height:30px;border:1px solid #DFDFDF;border-width:1px 0;margin:50px auto;}
        .typeList ul{height:30px;line-height:30px;padding-left:15px;overflow:hidden;}
        .typeList ul li{float:left; margin-right:12px;position:relative;}
        .typeList ul li input{display:none;}
        .typeList ul li label {padding-left:23px;}
        .typeList ul li:hover b{background-position:-12px -118px;}
        .typeList ul .selected b,.typeList ul .selected:hover b{background-position:-12px -218px;}
        .typeList ul li b{width:20px;height:20px;background:url(checkbox.gif) no-repeat -12px -18px;display:block;position:absolute;top:6px;left:0px;}
    </style>
    <script>
        function addLoadEvent(func){
            var oldonload = window.onload;//得到上一个onload事件的函数
            if(typeof window.onload !== 'function'){//判断类型是否是function
                window.onload = func;
            }else {
                window.onload = function(){
                    oldonload();//调用之前覆盖的onload事件的函数
                    func();//调用当前函数
                }
            }
        }
        function createBElement(){
            var ul = document.getElementById("checkList");
            var liList = ul.getElementsByTagName("li");
            var label;
            for(var i = 0 ; i < liList.length; i++){
                label = liList[i].getElementsByTagName("label");
                var b = document.createElement("b");
                liList[i].insertBefore(b,label[0]);
            }
        }
        function initSelected(){
            var liList = document.getElementById("checkList").getElementsByTagName("li");
            var evTimeStamp = 0;
            for(var i = 0; i < liList.length;i++){
                liList[i].onclick = function(){
                    var now = new Date();
                    if(now - evTimeStamp < 100){
                        return;
                    }
                    evTimeStamp = now;
                    if(this.className === "selected"){
                        this.className = null;
                    }else{
                        this.className = "selected";
                    }
                };
            }
        }
        addLoadEvent(createBElement);
        addLoadEvent(initSelected);
    </script>
</head>
<body>
    <div class="typeList">
        <form action="#" method="post" name="typeList">
            <ul id="checkList">
                <li class="selected"><input type="checkbox" name="typeList" id="xigua"/><label for="xigua">西瓜</label></li>
                <li><input type="checkbox" name="typeList" id="huanggua"/><label for="huanggua">黄瓜</label></li>
                <li><input type="checkbox" name="typeList" id="nangua"/><label for="nangua">南瓜</label></li>
                <li><input type="checkbox" name="typeList" id="putao"/><label for="putao">葡萄</label></li>
                <li><input type="checkbox" name="typeList" id="chengzi"/><label for="chengzi">橙子</label></li>
                <li><input type="checkbox" name="typeList" id="yingtao"/><label for="yingtao">樱桃</label></li>
                <li><input type="checkbox" name="typeList" id="juzi"/><label for="juzi">橘子</label></li>
                <li><input type="checkbox" name="typeList" id="ganzhe"/><label for="ganzhe">甘蔗</label></li>
                <li><input type="checkbox" name="typeList" id="xiangjiao"/><label for="xiangjiao">香蕉</label></li>
            </ul>
        </form>
    </div>
    <div>
        checkbox 的 id 要和for设置一样 这样点击的时候，checkbox就可以用了。<br/>
        window.onload = createBElement;记住createBElement不能加括号，加括号就是调用了，还未加载就调用了，会有空指针异常的<br/>
        input label有一个bug会有两次的onclick事件发生，此时简单的方法就是判断两个事件的时间差，小于100ms就return<br/>
    </div>
</body>
</html>

大大大v

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
radio和checkbox例子

radioDemo: 表单美化_单选按钮 div,dl,dt,dd,a{padding:0;margin:0;} body{font: 12px/22px "微软雅黑";} a{color:black;text-decoration:none;} .type{width:400px;height:3
复制链接

扫一扫