`

checbox,redio超强样式运用

 
阅读更多

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, IE=9" />

</head>

<script src="jquery-1.7.1.js"></script>

<script>

    $(function () {

        $(".Pro-questionnaire>.ques").each(function () {

            var icur = $(this).children("ul").children("li");

            for (var i = 0; i < icur.length; i++) {

                if (icur.eq(i).find("input")[0].checked) {

                    icur.eq(i).find("input").siblings("label").addClass("cur");

                }

            }

            $(this).children("ul").find("label").click(function (event) {

                //选择被选中而且类型为Checkbox的对象

                if ($(this).siblings("input").attr("type") == 'checkbox') {

                    if ($(this).hasClass("cur")) {

                        $(this).removeClass("cur");

                        $(this).siblings("input")[0].checked = false;

                    }

                    else {

                        $(this).siblings("input")[0].checked = true;

                        $(this).addClass("cur");

                    }

                }

                    //选择被选中而且类型为radio的对象

                else if ($(this).siblings("input").attr("type") == 'radio') {

                    if ($(this).hasClass("cur")) {

                        $(this).removeClass("cur");

                        $(this).siblings("input")[0].checked = false;

                    }

                    else {

                        $(this).parent("li").siblings("li").children("input").attr("checked", false);

                        $(this).parent("li").siblings("li").children("label").removeClass("cur");

                        $(this).siblings("input")[0].checked = true;

                        $(this).addClass("cur");

                    }

                }

                event.preventDefault();

                event.stopPropagation();

            });

        });

    });

 

</script>

<style>

    #rdoLsit_0

    {

        height: 20px;

        width: 20px;

    }

 

    .Pro-questionnaire

    {

        background: #f6f6f6;

        padding: 14px 21px;

        width: 628px;

        margin: 0 auto;

        overflow: hidden;

        margin-top: 20px;

    }

 

        .Pro-questionnaire .ques, .Product-releaseinfo .ques

        {

            background: url("/Images/probj_03.gif") repeat-x left bottom;

            padding-bottom: 15px;

            margin-bottom: 19px;

        }

 

        .Pro-questionnaire h3

        {

            font-size: 14px;

            color: #595757;

            font-weight: bold;

            margin-bottom: 10px;

        }

 

        .Pro-questionnaire ul li

        {

            font-size: 14px;

            color: #9fa0a0;

            display: inline;

        }

 

            .Pro-questionnaire ul li input

            {

                display: none;

            }

 

        .Pro-questionnaire .continueBtn

        {

            float: right;

        }

 

        .Pro-questionnaire ul li label

        {

            display: inline-block;

            cursor: pointer;

            padding: 6px 20px;

            border-radius: 5px;

            -moz-border-radius: 5px;

            -webkit-border-radius: 5px;

            background: #fff;

            margin-right: 5px;

            margin-bottom: 10px;

        }

 

            .Pro-questionnaire ul li label.cur

            {

                background: #2dade6;

                color: #fff;

            }

</style>

<div class="Pro-questionnaire" id="rptQuestionstd">

    <div class="ques">

        <h3>1、什么是您的天花板照明灯具(请参看上面的图片),你最有可能使用的Spotlight风扇的高度嘛?</h3>

        <ul id="rdoLsit">

            <li>

                <input id="rdoLsit_0" type="radio" name="ctl00$ctl00$cp$cp$rptQuestions$ctl00$rdoLsit" value="229" /><label for="rdoLsit_0">小于30cm</label></li>

            <li>

                <input id="rdoLsit_1" type="radio" name="ctl00$ctl00$cp$cp$rptQuestions$ctl00$rdoLsit" value="230" /><label for="rdoLsit_1">30毫米</label></li>

            <li>

                <input id="rdoLsit_2" type="radio" name="ctl00$ctl00$cp$cp$rptQuestions$ctl00$rdoLsit" value="231" /><label for="rdoLsit_2">40毫米</label></li>

            <li>

                <input id="rdoLsit_3" type="radio" name="ctl00$ctl00$cp$cp$rptQuestions$ctl00$rdoLsit" value="232" /><label for="rdoLsit_3">50毫米</label></li>

            <li>

                <input id="rdoLsit_4" type="radio" name="ctl00$ctl00$cp$cp$rptQuestions$ctl00$rdoLsit" value="233" /><label for="rdoLsit_4">60毫米</label></li>

            <li>

                <input id="rdoLsit_5" type="radio" name="ctl00$ctl00$cp$cp$rptQuestions$ctl00$rdoLsit" value="234" /><label for="rdoLsit_5">70毫米</label></li>

            <li>

                <input id="rdoLsit_6" type="radio" name="ctl00$ctl00$cp$cp$rptQuestions$ctl00$rdoLsit" value="235" /><label for="rdoLsit_6">80毫米</label></li>

            <li>

                <input id="rdoLsit_7" type="radio" name="ctl00$ctl00$cp$cp$rptQuestions$ctl00$rdoLsit" value="236" /><label for="rdoLsit_7">90毫米</label></li>

            <li>

                <input id="rdoLsit_8" type="radio" name="ctl00$ctl00$cp$cp$rptQuestions$ctl00$rdoLsit" value="237" /><label for="rdoLsit_8">不使用</label></li>

 

        </ul>

    </div>

 

    <div class="ques">

        <h3>2、您的天花板照明灯具,你最有可能使用的Spotilight风扇的直径是什么?</h3>

 

 

        <ul id="chkList">

            <li>

                <input id="chkList_0" type="checkbox" name="ctl00$ctl00$cp$cp$rptQuestions$ctl01$chkList$chkList_0" value="238" /><label for="chkList_0">小于30毫米</label></li>

            <li>

                <input id="chkList_1" type="checkbox" name="ctl00$ctl00$cp$cp$rptQuestions$ctl01$chkList$chkList_1" value="239" /><label for="chkList_1">40毫米</label></li>

            <li>

                <input id="chkList_2" type="checkbox" name="ctl00$ctl00$cp$cp$rptQuestions$ctl01$chkList$chkList_2" value="240" /><label for="chkList_2">50毫米</label></li>

            <li>

                <input id="chkList_3" type="checkbox" name="ctl00$ctl00$cp$cp$rptQuestions$ctl01$chkList$chkList_3" value="241" /><label for="chkList_3">60毫米</label></li>

            <li>

                <input id="chkList_4" type="checkbox" name="ctl00$ctl00$cp$cp$rptQuestions$ctl01$chkList$chkList_4" value="242" /><label for="chkList_4">70毫米</label></li>

            <li>

                <input id="chkList_5" type="checkbox" name="ctl00$ctl00$cp$cp$rptQuestions$ctl01$chkList$chkList_5" value="243" /><label for="chkList_5">80毫米</label></li>

            <li>

                <input id="chkList_6" type="checkbox" name="ctl00$ctl00$cp$cp$rptQuestions$ctl01$chkList$chkList_6" value="244" /><label for="chkList_6">90毫米</label></li>

            <li>

                <input id="chkList_7" type="checkbox" name="ctl00$ctl00$cp$cp$rptQuestions$ctl01$chkList$chkList_7" value="245" /><label for="chkList_7">100毫米</label></li>

            <li>

                <input id="chkList_8" type="checkbox" name="ctl00$ctl00$cp$cp$rptQuestions$ctl01$chkList$chkList_8" value="246" /><label for="chkList_8">不适用</label></li>

 

        </ul>

 

    </div>

 

    <div class="ques">

        <h3>3、你喜欢什么颜色的灯具呢?</h3>

 

 

 

        <ul id="rdoLsit">

            <li>

                <input id="rdoLsit_0" type="radio" name="ctl00$ctl00$cp$cp$rptQuestions$ctl02$rdoLsit" value="226" /><label for="rdoLsit_0">红色</label></li>

            <li>

                <input id="rdoLsit_1" type="radio" name="ctl00$ctl00$cp$cp$rptQuestions$ctl02$rdoLsit" value="227" /><label for="rdoLsit_1">黑色</label></li>

            <li>

                <input id="rdoLsit_2" type="radio" name="ctl00$ctl00$cp$cp$rptQuestions$ctl02$rdoLsit" value="228" /><label for="rdoLsit_2">白色</label></li>

 

        </ul>

    </div>

 

    <div class="ques">

        <h3>4、 你想免费得不?</h3>

 

 

 

        <ul id="rdoLsit">

            <li>

                <input id="rdoLsit_0" type="radio" name="ctl00$ctl00$cp$cp$rptQuestions$ctl03$rdoLsit" value="258" /><label for="rdoLsit_0">是的</label></li>

            <li>

                <input id="rdoLsit_1" type="radio" name="ctl00$ctl00$cp$cp$rptQuestions$ctl03$rdoLsit" value="259" /><label for="rdoLsit_1">不用</label></li>

 

        </ul>

    </div>

</div>

 
  • 大小: 45.6 KB
分享到:
评论
发表评论

文章已被作者锁定,不允许评论。

相关推荐

Global site tag (gtag.js) - Google Analytics