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. WPF之路-键盘与鼠标事件 - 简书

    原文:WPF之路-键盘与鼠标事件 - 简书 键盘事件 事件类型分为以下几个类型 生命周期事件:在元素加载与卸载的时候发生 鼠标事件:鼠标动作 键盘事件:键盘动作 手写笔事件:适用于win7以上的系统 ...

  2. P2P平台投宝金融跑路？为什么我没有中雷！

    编者按:市场有风险,投资需谨慎.最近,安徽合肥P2P平台"投保金融"跑路倒闭了. 今天(2016年11月8日)下午,在朋友圈看到一个分享,投宝金融跑路了,新闻媒体已经传开了. 这个 ...

  3. ubuntu 16.04 安装php 5 6等版本

    //加入ppa $ sudo add-apt-repository ppa:ondrej/php $ sudo apt-get update //安装5.6 $ sudo apt- //安装7 $ s ...

  4. LumiSoft.Net 收发邮件

    一:LumiSoft.Net简介 Lumisoft is a software development company specialised in mobile phones and tablets ...

  5. [转]操作系统Unix、Windows、Mac OS、Linux的故事

    [写得很江湖气,可惜找不到原作者了] 文章转自:http://blog.csdn.net/wenmingchan/article/details/49925379 http://www.jb51.ne ...

  6. 第五篇 Postman离线安装interceptor插件---Chrome app及录制请求

    在测试中,总是苦恼于无法直接使用chrome浏览器的cookie等信息,终于在茫茫网海中,发现了 https://www.jianshu.com/p/a4223bab1e73, 感谢 智者向内寻求力量 ...

  7. MAC清理DS_Store和._文件

    打开终端输入 find . -name .DS_Store -type f -delete ; find . -type d | xargs dot_clean

  8. python数据可视化——matplotlib 用户手册入门：使用指南

    参考matplotlib官方指南: https://matplotlib.org/tutorials/introductory/usage.html#sphx-glr-tutorials-introd ...

  9. conda环境管理

    查看环境 conda env list 创建环境 conda create -n python36 python=3.6 进入环境 source activate python36 activate ...

  10. mac 安装配置使用nexus3.x

    一.nexus安装 前置条件 :已经安装了JDK 1:下载nexus(http://www.sonatype.com/download-oss-sonatype) 最新版本3.0,下载目录为/User ...