DDR爱好者之家

jQuery实现获取选中复选框的值实例详解
站长资源 2024/11/26 佚名
74 1538
DDR爱好者之家 Design By 杰米

应用场景：

我们应该经常见到系统中出现列表，会有一个对列表数据的操作（如删除， 修改，查看等）。我们可以在每个列表项后面加一个删除按钮，把列表项的相关参数（如 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))

参数 描述 function(index,element) 必需。为每个匹配元素规定运行的函数。index - 选择器的 index 位置element - 当前的元素（也可使用 “this” 选择器）

遍历后，判断复选框是否被选中.

Jquery的prop函数(prop函数是jQuery1.6版本上的):

prop(name|properties|key,value|fn)

获取在匹配的元素集中的第一个元素的属性值。随着一些内置属性的DOM元素 或window对象，如果试图将删除该属性，浏览器可能会产生错误。jQuery第一次分配undefined值的属性，而忽略了浏览器生成的任何错误

参数 类型 版本 name(属性名称) String V1.6 properties(作为属性的“名/值对“对象) Map(String, Object) V1.6 key,function(index, attr) (属性名称，属性值) String, Function V1.6

[注意]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="/UploadFiles/2021-04-02/jquery-1.7.2.js">


至此，jQuery实现了复选框的取值，是不是非常简单？


总结




以上所述是小编给大家介绍的jQuery实现获取选中复选框的值，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米