jquery获取单选框复选框下拉框值

jquery获取单选框（radio）复选框（checkbox）下拉框（select）的值，亲测可用。有什么疑问可以留言

效果图：

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>

步骤已经写在代码中，方法有很多，这是笔者现阶段常用的方法。

个人主页：http://www.itit123.cn/ 更多干货等你来拿

jquery获取单选框复选框下拉框值相关推荐

webdriver--单选、复选及下拉框的定位
单选radiobutton的操作两种情况,一种是各个button元素的属性都有唯一定位值,可以直接用属性唯一值定位:另一种就是一组各方面属性值都一样的radiobutton,除了text,可以用组元 ...
力软下拉框多选_下拉框--可多选
方法 1:控件 checkedComboBoxEdit ///清空选项 checkedComboBoxEdit1.Properties.Items.Clear(); ///添加选项 checkedC ...
oracle 字段以逗号结尾的更新数据库_Oracle数据库某个字段的值为逗号分隔的多个值组成的字符串，以一个多选的下拉框进行查询...
某个字段的值为逗号分隔的多个值组成的字符串,现在需要通过一个可以多选的下拉框进行条件查询. 首先将该下拉框的值在后台获取后封装进一个String数组中,如; params.put("syst ...
[html] 制作一个多选的下拉框
[html] 制作一个多选的下拉框定义盒子 a标签绑定事件个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣一起通关前端面试题
php可输入的下拉框,jQuery实现可输入搜索文字的下拉框实例代码
利用jQuery实现可输入搜索文字的下拉框先看效果功能:点击下拉框输入框时,自动显示下面的下拉列表,而且是根据输入框中输入的搜索添加,自动在后台查找,然后传到前台,展现页面. 用的的js: var ...
android加载时二级联动点击二级联动,Android实现联动下拉框二级地市联动下拉框功能...
日常使用软件中,为了方便且规范输入,会使用到下拉框进行输入,如注册时生日选项,购物时的地址输入,都会用到下拉框,今日笔者为了巩固已学的知识,实现了二级联动下拉框用作回顾及分享给求知的新手. 思路/步骤 ...
php可输入的下拉框,JavaScript_可编辑下拉框的2种实现方式，可编辑下拉框-HTML 复制代码代 - phpStudy...
可编辑下拉框的2种实现方式可编辑下拉框-HTML A类 B类 C类 D类可编辑下拉框-JS 可编辑下拉框可编辑下拉框作者 function combox(obj,select){ this.o ...
store下拉框同步_关于选择主下拉框后~后面的下拉框跟着同步一起变化的问题~~...
关于选择主下拉框后~后面的下拉框跟着同步一起变化的问题~~ 代码很简单~4个下拉框~想要实现的效果就是~主下拉框选择了"赵子龙",后面3个下拉框当前选项也同步成"赵子龙& ...
根据一个下拉框改变另外一个下拉框内容
一.前言在编写网页的时候,有时候需要用到多重内容选择,例如先选择省市,再选择县镇等过程.这里简单实现了根据第一个下拉框点击的时候修改另外一个下拉框的内容,希望能对大家有所帮助. 二.实现思路定义两 ...
下拉框优化威zx78_下拉框优化应到千捷网络下拉系统
下拉词,是百度从网友的搜索词中筛选出搜索量较大的词条,整理分类,从而建立了百度联想词的词库,当用户输入搜索词就会被推荐. 所以下拉词词库是被搜索引擎收录整理,只要使用搜索引擎,无论在何处搜索引擎都会根 ...

jquery获取单选框复选框下拉框值

jquery获取单选框复选框下拉框值相关推荐

最新文章

热门文章