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. Easyui 控件的初始化方法

    问题: Easyui的控件在初始化的时候有两种方式: 页面指定class属性 js里初始化该id为easyui的控件 那么问题是: 如果页面不指定class属性,只是使用js初始化的话,会导致无法用控 ...

  2. 【LG4148】简单题

    [LG4148]简单题 题面 洛谷 题解 \(kdt\)模板题呀... #include <iostream> #include <cstdio> #include <c ...

  3. weka使用笔记3---classfily API调用

    分类器在数据挖掘中的作用不言而喻,weka中的分类器有很多种类型,但是weka在输出结果中,只输出了一个分类的预测的类型,没有输出分类的得分,有一些不给力.如果想知道得分和其预测的类的话,就得调用we ...

  4. 【redis的搭建】centos6.4下搭建redis

    说明:本文内容参考自一些资料,如有雷同,还请见谅. 部分参考: http://blog.csdn.net/su377486/article/details/51803616 http://blog.c ...

  5. AnyProxy对搜狐汽车app抓包

    关于AnyProxy 详细文档链接 http://anyproxy.io/cn/ anyproxy流程图 简要描述 当http请求经过代理服务器时,具体处理过程是: 收集请求所有请求参数,包括meth ...

  6. Nginx高性能优化

    #Nginx配置文件优化 worker_processes ; # nginx进程数,建议按照cpu数目来指定,一般为它的倍数. worker_cpu_affinity ; # 为每个进程分配CPU的 ...

  7. leetcode- 将有序数组转换为二叉搜索树(java)

    将一个按照升序排列的有序数组,转换为一棵高度平衡二叉搜索树. 本题中,一个高度平衡二叉树是指一个二叉树每个节点 的左右两个子树的高度差的绝对值不超过 1. 示例: 给定有序数组: [-10,-3,0, ...

  8. openstack系列文章（三）

    学习openstack的系列文章-glance glance 基本概念 glance 架构 openstack CLI Troubleshooting 1. glance 基本概念 在 opensta ...

  9. K-近邻算法入门

    K-近邻算法的直观理解就是:给定一个训练集合,对于新的实例,在训练集合中找到k个与该实例最近的邻居,然后根据“少数服从多数”原则判断该实例归属于哪一类,又称“随大流” K-近邻算法的三大要素:K值得选 ...

  10. access数据库频繁读取操作会出现 System.Data.OleDb.OleDbException 的异常解决

    asp.net access数据库 本来想着打开一个access数据库连接后,不关闭,下次操作数据了,直接拿来用,谁知道连着测试64次后(大概这么多次),就会出现System.Data.OleDb.O ...