jQuery实现获取选中复选框的值
应用场景:
我们应该经常见到系统中出现列表,会有一个对列表数据的操作(如删除,
修改,查看等)。我们可以在每个列表项后面加一个删除按钮,把列表项的
相关参数(如 id)post到后台进行删除。当然如果你每次只要删除一两条数
据这样子做并没有什么问题,但是如果你需要一次性删 除100条,你还去一条
条的删除吗?每一次删除10条会不会更好些呢?
好了,接下来。我们就使用jQuery解决这个问题。
首先,假设我们需要删除5个列表项。HTML里面列表标签是ul和ol, 其中ul是无序的,而ol是有序。每一个列表项使用li。
<ul id="fruit"><li><input type="checkbox" value="0001"/>苹果</li><li><input type="checkbox" value="0002"/>梨子</li><li><input type="checkbox" value="0003"/>芒果</li><li><input type="checkbox" value="0004"/>山楂</li><li><input type="checkbox" value="0005"/>香蕉</li>
</ul>
假设我们只需传递水果的ID到后台就可以删除所有水果。那么传递一个数组为[0001,0002,0003,0004,0005]到后台就可以了。所以,我们需要获取5个li元素中input标签的value值。
很明显,你的思路可能是利用jQuery筛选器先得到li下的input对象数组,再遍历这个数组,判断每一个input对象,然后判断input对象是否选中,选中就用val()函数获取它的值,然后把该值放入一个用来存储id的数组arr中。
【关键点】选择器,遍历,数组。
1.获取被选中的数组对象
jQuery的选择器中’ :checkbox’ 是查找所有复选框。
$("#fruit :checkbox");
2.遍历这个对象数组
jQeury的each函数:为每个匹配元素规定运行的函数。
each函数:
语法:
$(selector).each(function(index,element))
[注意]key,function(index,attr)中返回的属性值的函数,第一个参数为当前
元素的索引值,第二个参数为原先的属性值。
示例:
1.参数name的描述:
选中复选框的为true, 没选中为false
选中:
$("input[type='checkbox']").prop("checked",true);
没选中:
$("input[type='checkbox']").prop("checked",false);2.参数perporties描述:
禁用页面上的所有复选框。
$("input[type='checkbox']").prop({disabled:true});3.参数key,回调函数描述:
通过函数来设置所有页面上的复选框反选。
$("input[type='checkbox']").prop("checked",fucntion(i, val){return !val;
});
3.数组
这个最简单。jQuery定义一个数组。
var arr = new Array();
所以最后的代码:
<!DOCTYPE html>
<html>
<head><title>Jquery复选框练习</title><!-- 引入jQuery,引入你自己的jQuery文件 --><script type="text/javascript" src="../scripts/jquery-1.7.2.js"></script>
</head>
<body><div><p>选择要购买的水果</p><ul id="fruit"><li><input type="checkbox" value="001"/>苹果</li><li><input type="checkbox" value="002"/>雪梨</li><li><input type="checkbox" value="003"/>芒果</li><li><input type="checkbox" value="004"/>菠萝</li></ul><input type="checkbox" id="All"/><button id="checkAll">全选</button><button id="nothing">全不选</button><button id="reverseAll">反选</button><button class="chooseFruit">购买</button><script type="text/javascript"><!-- 选择全部/全不选 -->$("#All").click(function(){if("this.checked"){$("#fruit :checkbox").prop("checked", true);}else{$("#fruit :checkbox").prop("checked", false);}});<!--选择全部-->$("#checkAll").click(function(){$("#fruit :checkbox").prop("checked", true);});<!--全不选-->$("#nothing").click(function(){$("#fruit :checkbox").prop("checked", false);});<!--反选-->$("#reverseAll").click(function(){$("#fruit :checkbox").each(function(i){$(this).prop("checked", !$(this).prop("checked"));});});<!--获取选中复选框的值-->$(".chooseFruit").click(function(){var arr = new Array();$("#fruit :checkbox[checked]").each(function(i){arr[i] = $(this).val();});var vals = arr.join(",");console.log(vals);});</script></div>
</body>
</html>
转自:https://blog.csdn.net/sinat_20418545/article/details/73478617
jQuery实现获取选中复选框的值相关推荐
- jQuery如果选中复选框
本文翻译自:jQuery if checkbox is checked I have a function below that I want to only trigger when a check ...
- 检查是否已使用jQuery选中复选框
如何检查是否使用复选框数组的ID选中了复选框数组中的复选框? 我正在使用以下代码,但是无论ID为何,它始终返回已选中复选框的数量. function isCheckedById(id) {alert( ...
- 使用jquery检查/取消选中复选框? [重复]
本文翻译自:check / uncheck checkbox using jquery? [duplicate] This question already has an answer here: 这 ...
- jq多选按钮值_jQuery实现获取选中复选框的值实例详解
应用场景: 我们应该经常见到系统中出现列表,会有一个对列表数据的操作(如删除, 修改,查看等).我们可以在每个列表项后面加一个删除按钮,把列表项的相关参数(如 id)post到后台进行删除.当然如果你 ...
- 使用JavaScript(jQuery或Vanilla)选中/取消选中复选框?
本文翻译自:Check/Uncheck checkbox with JavaScript (jQuery or Vanilla)? 如何使用JavaScript,jQuery或vanilla选中/取消 ...
- el-checkbox点击后面的内容不选中复选框
提出需求:要求点击后面的tag前面复选框不选中 思考:把后面的内容移出checkbox标签内,尝试后发现因为循环和样式问题不可取. 查百度都是点击后面的内容选中复选框.于是想反向思考,看了Elemen ...
- php 获取下拉框选中的文本,jQuery如何获取select选择的文本与值?(代码示例)...
本篇文章给大家带来的内容是关于jQuery如何获取select选择的文本与值,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 获取select : 获取select 选中的 text ...
- Jquery怎么获取select选中项 自定义属性的值
Jquery如何获取select选中项 自定义属性的值? HTML code <select id="ddl" οnchange="ddl_change(this) ...
- html获取选中复选框的值,获取html复选框列表选中的值隐藏字段
如何获取选中的复选框id到一个隐藏的变量?获取html复选框列表选中的值隐藏字段 我收到此错误. SyntaxError: unterminated string literal var test = ...
最新文章
- 鼠标平滑滤波_38年依然保持旺盛创作力,罗技G Hero16K撑起无线游戏鼠标时代
- 粒子群优化算法_每日论文19:粒子群优化算法综述
- “export ‘default‘ (imported as ‘echarts‘) was not found in ‘echarts‘
- [Leetcode][第1143题][JAVA][最长公共子序列][LCS][动态规划]
- STL源码剖析 multiset 和 multimap
- logagent同步mysql_LogAgent的工作流程
- java服务器项目,java项目服务器部署
- Excel学习笔记:P1-Excel入门
- java设置excel整列格式,poi excel设置列格式方法添加
- CNN手写汉字识别参数调整
- Mybatis XML文件属性配置
- 判断文本框输入中文超过10个英文数字超过20个
- mysql where in()
- element ui 前台模板_一个干净优雅的 Element UI Admin 模板
- android自动化测试辅助工具Weinre
- 小VIVO机器人壁纸图片_vivo-智能手机官方网站
- tdd干扰波形_TDD-LTE上行干扰定位方法及排查指导手册.doc
- 【大学生Python】海洋单位距离的换算
- 用HTML和CSS做一个携程旅游手机端布局含源码分享
- AlphaGo 和 ChatGPT有何相似之处? 附AlphaGo核心算法开源链接