效果图：

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. Java构建树结构的公共方法

    一.前提 pId需要传入用来确认第一级的父节点,而且pId可以为null. 树实体类必须实现:TreeNode接口 MyTreeVo必须有这三个属性:id.pId.children 可以根据不同需求, ...

  2. devops｜中小公司不要做研发效能度量

    我特别反感那些不顾公司现状一上来就想要做研发效能度量的人,尤其是想把研发效能度量当成锤子四处去敲打螺丝钉的人. 没几个人的小公司上来就做研发效能度量,就如同普通人一上来直接问媒婆怎么能娶到迪丽热巴.解 ...

  3. 飞桨paddlespeech语音唤醒推理C实现

    上篇(飞桨paddlespeech 语音唤醒初探)初探了paddlespeech下的语音唤醒方案,通过调试也搞清楚了里面的细节.因为是python 下的,不能直接部署,要想在嵌入式上部署需要有C下的推 ...

  4. 从原理聊JVM（二）：从串行收集器到分区收集开创者G1

    作者:京东科技 康志兴 1 前言 随着Java的进化过程,涌现出各种不同的垃圾回收器,从串行执行到并行执行,从高吞吐到低延迟,终极目标就是让开发人员专注于程序的代码书写而无需关注内存管理. JDK早期 ...

  5. 单窗算法的地表温度反演：谷歌地球引擎GEE代码

      本文介绍在GEE中基于Landsat遥感影像实现地表温度(LST)单窗算法反演的代码. 1 背景知识   基于遥感数据的地表温度(LST)反演目前得到了广泛的应用,尤其是面向大尺度.长时间范围的温 ...

  6. Comparator之用最少数量的箭引爆气球

    文章目录 前言 关于Comparator 原题 前言 今天刷个题,遇到一个很有趣的问题,关于Comparator的使用,感觉也是一个关于写代码的一些小细节的问题 关于Comparator Compar ...

  7. Java的对象包装器 & 自动装箱

    有时,需要将 int 这样的基本类型转换为对象.所有的基本类型都有一个与之对应的类.例如,Integer 类对应基本类型 int.通常,这些类被称为包装器(wrapper).这些对象包装器类拥有很明显 ...

  8. 「学习笔记」2-SAT问题

    SAT 是适定性 (Satisfiability) 问题的简称.一般形式为 k - 适定性问题,简称 k-SAT.而当 \(k>2\) 时该问题为 NP 完全的.所以我们只研究 \(k=2\) ...

  9. Grafana 系列-统一展示-3-Prometheus 仪表板

    系列文章 Grafana 系列文章 知识储备 Prometheus Template Variables 你可以使用变量来代替硬编码的细节,如 server.app 和 pod_name 在 metr ...

  10. stl-----map去重，排序，计数

    一.map erase()删除函数:可以迭代器删除,关键字删除,成片删除. 例:1.iter=mapStu.find(1); mapStu.erase(iter); 2.int n = mapStu. ...