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. pgpool-II的master-slave模式的分析

    磨砺技术珠矶,践行数据之道,追求卓越价值 回到上一级页面: PostgreSQL集群方案相关索引页     回到顶级页面:PostgreSQL索引页 现象描述: 客户来邮件,问:为何Pgpool-II ...

  2. spring 缓存机制

    简介 Spring3.1开始引入了基于注释的缓存,其使用方法和原理类似于Spring对事务管理的支持.可以对容器中的任意的bean或bean的方法添加缓存.   配置Spring缓存 Spring缓存 ...

  3. DB知识点记录

    DB知识点记录 分页 SqlServer:ROW_NUMBER () over (ORDER BY ID) AS RN, MySql:limit Oracle:ROWNUM AS RN 数据表的基本结 ...

  4. Scrapy爬取美女图片第三集 代理ip(下)

    这是我的公众号获取原创保护的首篇文章,原创的肯定将支持我继续前行.现在写这篇文章的时间是晚上11:30,写完就回寝室休息了,希望更多的朋友与我一起同行(当然需要一个善良的妹子的救济).(我的新书< ...

  5. Django之视图系统

    Django的View(视图) 一个视图函数(类),简称视图,是一个简单的python函数(类),它接受web请求并返回web响应. 响应可以是一张网页的HTML内容,一个重定向,一个404错误,或者 ...

  6. python5

    print应用 // 输出两行 print "hahaha" print "hehehe" // 输出在同一行里 print "hahaha" ...

  7. .net mvc 使用ueditor的开发（官网没有net版本？）

    1.ueditor的下载导入 官网下载地址:https://ueditor.baidu.com/website/download.html · 介绍 有两种,一种开发版,一种Mini版,分别长这样: ...

  8. java list根据id获取子节点

    工作中因业务需求,将数据库中的树状结构的数据根据父节点获取所有的子节点 实现思路 1.获取整个数据的list集合数据 2.将数据分组,java8 list有groupby分组,java8之前的自己遍历 ...

  9. CsvHelper文档-6类型转换

    CsvHelper文档-6类型转换 CsvHelper使用类型转换器来转换string到对象,或者对象到string: ITypeConverter 类型转换器的结构,必须实现: public int ...

  10. MSCOCO - pycocoDemo 学习版

    Reference: https://github.com/cocodataset/cocoapi/blob/master/PythonAPI/pycocoDemo.ipynb https://git ...