HTML：

<!DOCTYPE html>

<html>

    <head>

        <title></title>

        <meta charset="UTF-8" />

        <script src="test.js" type="text/javascript" charset="utf-8"></script>

        <style type="text/css">

            body{

                background-image: url(img/bg.jpg);

                font-family: "微软雅黑";

            }

            ul li{list-style:none;float:left;cursor:pointer;padding:0 5px;border:1px solid #ccc;border-radius:2px;margin: 0 2px;}

            .content,content-radio,content-checkbox{display:inline;}

            .selected{background-color: #17D6AA;}

        </style>

    </head>  

    <body>

        <span>jquery 获取 ul li 的值: <span class="content">全部</span></span>

        <ul>

            <li>值一</li>

            <li>值二</li>

            <li>值三</li>

            <li>值四</li>

            <li>值五</li>

        </ul>

        <br><br>  

        <span>jquery 获取 radio 的值: <span class="content-radio">全部</span></span><br>

        <label><input type="radio" name="sex" value="男">男</label>

        <label><input type="radio" name="sex" value="女">女</label>

        <label><input type="radio" name="sex" value="保密">保密</label>

        <!--

        <p>1、$('input:radio:checked').val();</p>

        <p>2、$("input[type='radio']:checked").val();</p>

        <p>3、$("input[name='sex']:checked").val();</p>

        <p>4、val 可以换成 text;</p>

        -->

        <br><br>  

        <span>jquery 获取 checkbox 的值: <span class="content-checkbox">全部</span></span><br>

        <label><input type="checkbox" name="con" value="内容一">内容一</label>

        <label><input type="checkbox" name="con" value="内容二">内容二</label>

        <label><input type="checkbox" name="con" value="内容三">内容三</label>

        <br><br>  

        <span>jquery 获取 select 的值: <span class="content-select">全部</span></span><br>

        <select>

            <option>-请选择-</option>

            <option>选择一</option>

            <option>选择二</option>

            <option>选择三</option>

        </select>

    </body>

</html>

jQuery：

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js" ></script>

        <script>

            $(function(){

                // 获取 ul li 中的值

                $("ul").find("li").click(function(){

                    $(this).addClass("selected").siblings().removeClass("selected");

                    $(".content").text($(this).text());

                });

                // 获取 radio 中的值

                $("input[type='radio']").click(function(){

                    $(".content-radio").text($("input[type='radio']:checked").val());

                });

                // 获取 checkbox 中的值

                $("input[type='checkbox']").click(function(){

                    var cons = [];// 每次点击需清空上次选择内容，避免重复

                    $("input[type=checkbox]").each(function(){

                        if(this.checked){

                            cons.push($(this).val());

                            $(".content-checkbox").text(cons);

                        }

                    });

                });

                // 获取 select 中的值

                $("select").click(function(){

                    $(".content-select").text($('select option:selected').text());

                });

            });

        </script>

【JavaScript&jQuery】单选框radio，复选框checkbox，下拉选择框select的更多相关文章

  1. FancySelect – 更好用的 jQuery 下拉选择框插件

    FancySelect 这款插件是 Web 开发中下拉框功能的一个更好的选择.FancySelect 使用方便,只要绑定页面上的任何 Select 元素,并调用就 .fancySelect() 就可以 ...

  2. ul+jquery自定义下拉选择框

    <!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. jquery.chosen.js下拉选择框美化插件项目实例

    由于之前使用的bootstrap-select插件是建立在bootstrap基础上的,实际使用到项目中的时候,与我们使用的ace-admin(基于bootstrap)存在样式冲突,导致下拉框的样式发生 ...

  4. 基于jQuery美化联动下拉选择框

    今天给大家介绍一款基于jQuery美化联动下拉选择框.这款下下拉选择框js里自带了全国所有城市的数数库.下拉选择框适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲 ...

  5. jQuery插件——下拉选择框

    其实,之前也写过jQuery插件,今天写的是一个模拟select选择的下拉插件. 既然是jQuery插件,那么必然是依赖jQuery的了. 老规矩,直接上代码吧! ;(function () { $. ...

  6. 一款javascript实现的超炫的下拉选择框

    今天为给大家带来一款javascript实现的超炫的下拉选择框.下拉的列表由半用透明的幽灵按钮组成.显示下拉的时候,列表项由左右两侧飞入.消息时飞向左右两侧.一起看下效果图 在线预览   源码下载 实 ...

  7. layui下拉选择框select不显示

    弹层layer下拉框没有样式_不可点击_没有效果_渲染失效的解决办法 一.必须给表单体系所在的父元素加上 class="layui-form" 在一个容器中设定 class=&qu ...

  8. selenium的下拉选择框

    今天总结下selenium的下拉选择框.我们通常会遇到两种下拉框,一种使用的是html的标签select,另一种是使用input标签做的假下拉框. 后者我们通常的处理方式与其他的元素类似,点击或使用J ...

  9. CSS3不一样的下拉选择框

    本例中包含两个下拉选择框的动画示例,本例中并未使用select标签.本例中第一个案例也可用于标题.导航栏等位置. 案例一: html布局 <div class="content&quo ...

  10. selenium之 下拉选择框Select

    今天总结下selenium的下拉选择框.我们通常会遇到两种下拉框,一种使用的是html的标签select,另一种是使用input标签做的假下拉框. 后者我们通常的处理方式与其他的元素类似,点击或使用J ...

随机推荐

  1. Docker入门篇（一）之docker基础

    1.Docker 架构 http://blog.csdn.net/u012562943/article/category/6048991/1Docker 使用客户端-服务器 (C/S) 架构模式,使用 ...

  2. Drupal7重置密码方法

    Drupal版本 7.40 方法1: 根目录index.php添加 require_once 'includes/password.inc'; require_once 'includes/boots ...

  3. Lite OS学习之事件EVENT

    1. Lite OS的事件EVENT,就是一个任务向另外一个任务通知事件的,不能数据传输.看下有的函数,实际比较复杂 2. 具体还是看编程,先全局结构体整个事件变量 /*事件控制结构体*/ EVENT ...

  4. Windows下python环境的安装

    1.下载安装包 https://www.python.org/downloads/ 2.安装 默认安装路径:C:\python27 3.配置环境变量 [右键计算机]-->[属性]-->[高 ...

  5. 基于ejabberd简单实现xmpp群聊离线消息

    首先,xmpp服务器是基于ejabberd.离线消息模块是mod_interact,原地址地址:https://github.com/adamvduke/mod_interact: 修改后实现群聊离线 ...

  6. git remote: error: hook declined to update

    提交一个项目,push的时候,报错: remote: error: File xxx.rar is MB; this exceeds Git@OSC's file size limit of 100 ...

  7. TPO 02 - Early Cinema

    TPO 02 - Early Cinema NOTE: 主要意思(大概就是主谓宾)用粗体标出:重要的其它用斜体: []中的是大致意思,可能与原文有关也可能无关,但不会离题 目的为训练句子/段落总结能力 ...

  8. 3.0 zookeeper的集群介绍、搭建、环境、安装

    zookeeper是本身是一种分布式协调服务(英文意思动物园园长因为Hadoop就是一个动物园,storm.hadoop.kafkaka.hbaser都是基于zookeeper开发的) 原理:Zook ...

  9. v-model 双向数据绑定

    通过v-model指令可以实现双向数据绑定 HTML部分: <div id="app"> <input type="text" v-model ...

  10. RC电路简介，RC串并联电路的工作原理及应用

    RC电路简介,RC串并联电路的工作原理及应用 RC电路全称Resistance-Capacitance Circuits.一个 相移电路(RC电路)或称 RC滤波器. RC网络, 是一个包含利用电压源 ...