`

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
分享到：
| html页面获取参数加载数据，提高访问速度
评论
发表评论

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

相关推荐

    Customize_checbox_src.zip

    这可能意味着开发者在处理复选框的样式、事件处理、动画效果等方面进行了个性化定制。 【压缩包子文件的文件名称列表】: 1. `checkboxdemo.aspx`：这是一个ASP.NET的网页文件，其中包含了HTML、服务器端代码（如C#...

    一个样式（左右滑动选中的checbox）

    "一个样式（左右滑动选中的checkbox）"是这样的一个设计，它模仿了安卓系统中常见的滑动选择功能，使得用户可以通过简单的手势操作来切换checkbox的状态。这个项目可能是一个WPF（Windows Presentation Foundation）...

    Checbox的操作含已选、未选及判断代码

    checkbox： $(“#chk1”).attr(“checked”,”);//不打勾 $(“#chk2”).attr(“checked”,true);//打勾 if($(“#chk1”).attr(‘checked’)==undefined) //判断是否已经打勾

    JQuery 自定义 radio与checkbox

    CSS部分，我们可以定义新的样式规则，覆盖浏览器的默认样式。最后，jQuery代码用于绑定事件和更新样式。 在提供的压缩包"radio-checkbox"中，很可能包含了示例的HTML文件、CSS样式表以及实现以上功能的jQuery脚本。...

    layui 动态设置checbox 选中状态的例子

    最近在使用layui前端框架，在使用单选按钮、下拉菜单select、checkbox等控件的时候 往往遇到一些初始化的东西。 有时候会发现，自己动态append进去的代码要不就是没有显示，要不就是初始化默认选中出问题。...

    asp.net Checbox在GridView中的应用实例分析

    本文实例讲述了asp.net Checbox在GridView中的应用方法。分享给大家供大家参考，具体如下： 先看效果图： 前台代码：样式自己定义哦！ &lt;yxy:HkrGridView ID=tabGridView1 runat=server AutoGenerateColumns=...

    ListView中嵌套CheckBox

    下载积分被CSDN设置了50积分，非本人所为。没有积分的可以参看这篇文章。文章中代码基本都贴出来了。https://blog.csdn.net/qq_20521573/article/details/52073472

    layui的checbox在Ajax局部刷新下的设置方法

    layui的复选框包含两个部分：实际的`&lt;input type="checkbox"&gt;` 和一个带有类`layui-form-checkbox`的`&lt;div&gt;`元素，用于展示样式和交互。因此，你可以按照以下方式插入新的HTML： ```html � ``` 这种方法要求...

    Checbox-Validation-Sanitize-PHP:一个简单的脚本来验证复选框

    Checbox-Validation-Sanitize-PHP 一个简单的脚本来验证复选框 :globe_with_meridians: :globe_with_meridians: :globe_with_meridians: :globe_with_meridians: :globe_with_meridians: :globe_with_meridians: :...

    Android ListView 带 CheckBox(全选，反选，全不选)

    - 可以通过设置CheckBox的样式来自定义其外观，如颜色、大小等，以符合应用的整体设计风格。 10. **处理多个选择操作** - 如果需要支持多选并进行批量操作（如删除、编辑等），可以在监听事件中收集所有选中的项...

    获取GridView中Checkbox的值

    在ASP.NET开发中，GridView控件常用于展示数据表格，而Checkbox则经常被用来实现用户选择功能。在“获取GridView中Checkbox的值”这个场景下，我们通常关注的是如何在用户交互后，如点击按钮时，获取到GridView中被...

    custom-radio-and-checbox-only-css:仅使用CSS自定义复选框和单选框

    定制无线电和仅复选框的css Personaliza los复选框和单选CSS收音机。乌苏 &lt; input type = ”radio | checkbox” name = ”miawesomecheckboxorradio” id = ”miradioorcheckboxid” checked &gt;...

    layui实现checkbox的目录树tree的例子

    Layui提供了多种内置的样式，'as'可能代表了一种默认或者预定义的样式，用于美化树形控件的外观。 - `drag: true`：这个选项使得每个树节点都支持拖拽操作。这在需要对树节点顺序进行调整时非常方便，但文档中未提供...

    SimpleCheckbox:一个简单的复选框

    SimpleCheckbox旨在实现其他ios复选框控件所没有的功能。 简单点。 没有动画，没有IBDesignable来减慢界面生成器的速度，也没有性能沉重的绘制方法。 :party_popper: 特征 :ledger: 文献资料 ...

    GridView使用集合

    6、JavaScript操作checbox实现全选，多选 六、设置属性 1、JavaScript设置GridView行的背景颜色，单偶行的背景颜色，鼠标停留行背景，鼠标选中时的行背景 2、GridView的JavaScript中的行单击，双击、删除提示框、...

    关于onchange事件在IE和FF下的表现及解决方法

    在最近做的一个项目中，有这么一个功能点：...但在IE下改变checkbox的选中状态时，并不会马上出发onchange事件，而是需要等待checbox失去焦点时该事件才会出发。 为了解决这个问题，我在checkbox的onclick事件里添加了

Magicbox
Global site tag (gtag.js) - Google Analytics