效果图：

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{}

</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="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js" ></script>

<script>

$(function(){

// 获取 ul li 中的值

$("ul").find("li").click(function(){

$(this).addClass("selected").siblings().removeClass("selected");

$(".content").text($(this).text());

});

// 获取 radio 中的值

//作者主页 https://www.2017549.com

$("input[type='radio']").click(function(){

$(".content-radio").text($("input[type='radio']:checked").val());

});

// 获取 checkbox 中的值

//作者主页 https://www.bang4.cn

$("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>

jquery获取框值的数据，收藏一下吧的更多相关文章

  1. jquery获取kindEditor值

    KE.show({            id: 'txtMessage',            imageUploadJson: '/ajax/Manager/keupload.ashx?ptyp ...

  2. Jquery文本框值改变事件兼容性

    Jquery文本框值改变事件(支持火狐.ie)   Jquery值改变事件支持火狐和ie浏览器,并且测试通过,绑定后台代码可以做成autocomplete控件. 具体代码列举如下: ? $(docum ...

  3. jquery 获取一组元素的选中项 - 函数、jquery获取复选框值、jquery获取单选按钮值

    做表单提交时,如果现在还在用form提交,用户体验很差,所以一般使用ajax提交. 其中需要获取每个表单输入元素的值,获取的时候像文本框这些还好说,Jquery提供了 .val() 方法,获取很方便, ...

  4. jQuery获取多种值的方法

    **jQuery 1.3.2版本下的 jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相关设置** 1.判断是否已经打 ...

  5. jquery获取input值的各种情况

    jQuery获取多种input值的方法 获取input的checked值是否为true: 第一种: if($("input[name=item][value='val']").at ...

  6. jquery 获取设置值、添加元素详解

    jQuery 获取内容和属性 jQuery DOM 操作 jQuery 中非常重要的部分,就是操作 DOM 的能力. jQuery 提供一系列与 DOM 相关的方法,这使访问和操作元素和属性变得很容易 ...

  7. 转载JQuery 获取设置值，添加元素详解

    转载原地址 http://www.cnblogs.com/0201zcr/p/4782476.html jQuery 获取内容和属性 jQuery DOM 操作 jQuery 中非常重要的部分,就是操 ...

  8. jquery获取radio值

    单选组radio: $("input[@type=radio][@checked]").val(); 单选组 radio: $("input[@type=radio]&q ...

  9. div居中和table居中，jQuery获取下拉列表值

    一.div居中 margin-left: auto;margin-right: auto; <div  style="width:960px ; margin-left: auto;m ...

  10. 【Codebase】JQuery获取表单部分数据提交方法

    JQuery使用ajax提交整个表单最简便的方法就是$('#form').serialize();但如果仅想保存表单中的部分数据,比如仅更新选中的条目,那么获取数据就比较麻烦了. 解决方法:新建一个表 ...

随机推荐

  1. 腾讯出品小程序自动化测试框架【Minium】系列（七）测试框架的设计和开发

    前言 整个框架的开发及调通是在3月27日晚上22点完成,如下: 这篇文章真的是拖了太久了,久到我居然把代码部分完成后,彻底给忘了,这记性,真的是年纪大了! 框架的设计开发 1.框架搭建设计要素 日志& ...

  2. ModelAndView方法的返回值类型

    一.ModelAndView @RequestMapping("/selectById") public ModelAndView queryById(Integer id){ M ...

  3. UnrealEngine - 网络同步入门

    1 网络同步机制 UE 提供了强大的网络同步机制: RPC :可以在本地调用,对端执行 属性同步:标记一个属性为 UPROPERTY(Replicated) 就可以自动将其修改后的值同步到客户端 移动 ...

  4. 【Vue】二

    一个第三方js处理类库 BootCDN Vue过滤器 Date.now() 获取时间戳 Date.now() 1652411231222 计算属性实现 <body> <div id= ...

  5. Spring注解@Conditional相关用法

    1.@Conditional注解 @Conditional 是Spring4新提供的注解. 它的作用是按照一定的条件进行判断,满足条件给容器注册bean,否则不注入. 可以作用在方法上,也可以作用在类 ...

  6. ray-分布式计算框架-集群与异步Job管理

    0. ray 简介 ray是开源分布式计算框架,为并行处理提供计算层,用于扩展AI与Python应用程序,是ML工作负载统一工具包 Ray AI Runtime ML应用程序库集 Ray Core 通 ...

  7. Nuget 多项目复合打包

    问题描述 我这里有个进程间通信组件,用于提供多应用间通信的解决方案. 进程间通信,分为客户端和服务端,俩端肯定会有些共性代码,所以加了个H3C.Channel.Core项目 因为之前还不太了解nuge ...

  8. 进程间通信WebSocket 服务端未启动时，客户端重连报错

    当WebSocket服务端未启动时,我们在客户端申请连接,会报 System.Net.Sockets.SocketException 异常. 当然,我们调试时异常设置默认是不勾选这个的.所以不影响正常 ...

  9. TOF和结构光

    文章目录 TOF和结构光 一.ToF 二.结构光 三.测量距离.分辨率.开发周期的对比 TOF和结构光 一.ToF ToF(Time of Flight)飞行时间 字面理解就是通过光的飞行时间来计算距 ...

  10. 高级Java程序员必问，Redis事务终极篇

    1. 简介 1.1 什么是Redis事务 Redis事务(Transaction)通过将多个Redis操作封装为一个原子性的操作序列,确保在事务执行过程中,不会受到其他客户端的干扰.从而在保证数据一致 ...