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 窗口句柄获取和设置 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/BYH371256/article/details/83347163 ...

  2. sql语句-7-更新数据

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

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

  4. centos下JDK安装及环境变量配置

    由于centos安装自带openjdk,需要将其卸载后安装自己的jdk 卸载centos自带jdk 1.查找java :rpm -qa | grep java 2.卸载时提示权限不够,进入root目录 ...

  5. 深入了解MySQL存储索引

    (一)关于存储引擎 创建合适的索引是SQL性能调优中最重要的技术之一.在学习创建索引之前,要先了解MySql的架构细节,包括在硬盘上面如何组织的,索引和内存用法和操作方式,以及存储引擎的差异如何影响到 ...

  6. 前端之JavaScript（二）

    一.概述 本篇主要介绍JavaScript的BOM和DOM操作,在前端之JavaScript(一)中介绍了JavaScript基础知识 1.1.BOM和DOM BOM(Browser Object M ...

  7. windows python MySQL-python安装过程

    问题表述: pip install MySQL-python==1.2.5 出现如下报错: C:\Users\Administrator\AppData\Local\Programs\Common\M ...

  8. hdu - 6276，2018CCPC湖南全国邀请赛A题,水题,二分

    题意: 求H的最大值,  H是指存在H篇论文,这H篇被引用的次数都大于等于H次. 思路:题意得,  最多只有N遍论文,所以H的最大值为N, 常识得知H的最小值为0. 所以H的答案在[0,N]之间,二分 ...

  9. 斯坦福大学机器学习（Andrew Ng@2014）--自学笔记

    今天学习Andrew NG老师<机器学习>之6 - 6 - Advanced Optimization,做笔记如下: 用fminunc函数求代价函数最小值,分两步: 1.自定义代价函数 f ...

  10. 每天一个linux命令集

    linux命令汇总,装载来自: http://www.cnblogs.com/peida/category/309012.html