JQ checkbox 全选和全不选

最新推荐文章于 2024-04-17 09:12:12 发布
最新推荐文章于 2024-04-17 09:12:12 发布
阅读量267 收藏
点赞数
分类专栏： 境-JS 文章标签： checkbox 全选和全不选 一行代码搞定 JQ

下面就介绍如何用一句话搞定全选功能

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="box">
    <input type="checkbox" οnclick="checkAll(this)">全选<br><br>
    <input type="checkbox"><br>
    <input type="checkbox"><br>
    <input type="checkbox"><br>
    <input type="checkbox"><br>
    <input type="checkbox"><br>
    <input type="checkbox"><br>
    <input type="checkbox"><br>
    <input type="checkbox"><br>
    <input type="checkbox"><br>    
</div>
<script type="text/javascript" src="jquery-1.10.1.min.js" ></script>
<script>
function checkAll(obj){
    $("#box input[type='checkbox']").prop('checked', $(obj).prop('checked'));
}
</script>
</body>
</html>

 

效果图：

 

 

 

 

 

 

 

iteye_17658
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery操作checkbox实现全选和取消全选
12-11
今天这样写了一个全选和取消全选的功能： 全选：$(“:checkbox”).attr(“checked”,”checked”); 取消全选：$(“:checkbox”).removeAttr(“checked”); 获取选中的：$(“:checked[checked=’checked’]”) 发现点全选可以，在点取消全选也可以，获取选中的失效，接下来再点任何按钮都没有效果了 这样行不通，我也不太清楚什么原因，脚本语言就这毛病，一边灵活一边诡异，也不去找原因了，后来改成这样写 全选： $(“:checkbox”).prop(“checked”,true) 取消全选：$(“:checkbox”).
jQuery模糊匹配checkbox全选 value实现checkbox部分或全部全选
wpydaguan的专栏
05-21 1950
本文章总结jQuery实现checkbox三种情况的全选功能 第一种：等值全选，也称name的等值全选，通过checkbox的名称name实现。 第二种：模糊全选，也称id模糊全选，通过checkbox的id或value值实现。 第三种：值范围全选，也称value值范围全选，通过checkbox的value值实现，或者截取id数字后缀范围判断实现。 等值全选 在工作中
jquery checkbox 选中、改变状态、change 和 click 事件
热门推荐
愿我如星君如月 ... 夜夜流光相皎洁 ...
01-10 1万+
jquery判断checked的三种方法: ​​​​​​​ .attr('checked); //看版本1.6+返回:”checked”或”undefined” ;1.5-返回:true或false .prop('checked'); //16+:true/false .is(':checked'); //所有版本:true/false//别忘记冒号哦 jquery赋值checked的几种写...
复选框的全选和取消全选
weixin_52385232的博客
09-06 1207
复选框的全选和取消全选
jquery全选和取消全选
精通前端技术，了解后端接口
03-01 528
jquery全选和反选
jquery实现checkbox的全选和全不选
10-18
jquery实现全选和全不选，只要有一个复选框没有选中，全选框不选中；
jquery一键控制checkbox全选、反选或全不选
11-27
通过以上解析，我们可以理解这个示例是如何通过jQuery实现复选框的全选、反选和全不选功能的，并且了解到在处理这类问题时需要注意的细节，包括使用`prop()`而不是`attr()`来处理`checked`属性，以及如何通过事件...
一天搞定jQuery(三)——使用jQuery完成复选框的全选和全不选
05-11
为了实现全选和全不选的功能，我们需要一个主复选框（通常标记为“全选”），以及一组相关的子复选框。例如： ```html <input type="checkbox" id="selectAll"> 全选 <input type="checkbox" class=...
基于jquery实现复选框全选，反选，全不选等功能
11-26
在本篇文章中，我们将探讨如何利用 jQuery 来实现复选框的全选、反选和全不选等功能。这些功能在各种用户界面中都非常常见，例如在批量操作列表项或进行多选项选择时。 首先，让我们回顾一下示例中的 HTML 结构，它...
jquery实现checkbox的单选和全选
hu531035580的博客
04-03 730
<input type="checkbox" name="all">全选</th><th>用户名</th><th>昵称</th><th>邮箱</th><th>角色</th><th>操作
全选和取消全选--checkbox
哈哈
06-01 2245
全选与取消全选
jQuery实现checkbox全选功能
KobeSacre的博客
03-10 1290
// 实现全选功能 $("#summaryBox").click(function() { // 查看当前全选是否被选中 var status = this.checked; // 根据status来设置其他多选框的状态 $(".itemBox").prop("checked", status); }); // 当本页所有用户被选中时，全选会自动选中 $("#rolePageBody").on("click", ".itemBox", funct
复选框实现单选、全选、全不选、以及给复选框中全选框设置Jquery事件
weixin_54185409的博客
05-20 1421
以上的难点在于不仅要为“全选”框checkbox添加监听事件，也要监听每个爱好的被选中状态。别忘记引用Jquery。
Jquery实现表单的“全选”，“全部不选”功能
weixin_51474578的博客
07-20 2015
希望帮助到你！！！
一行jQuery代码搞定checkbox 全选和全不选
合格程序猿
04-01 294
让复选框全部选中和全部取消是比较常用的；下面就介绍如何用一句话搞定全选功能；
vue 实现checkbox选中，在上面显示选中的数据，删除取消选中并删除显示的数据...
梁小茹的博客
12-12 3277
实现勾选选中和删除取消
08-jQuery-实现全选和全不选操作
记录java学习日常~
05-24 743
如果有一个未被选中，则不是全部选中，将全选的 checkbox 取消选中；否则全部选中，将全选的 checkbox 选中。这里使用了 prop() 方法来设置 checkbox 的 checked 属性，如果全选的 checkbox 被选中了，则将所有的水果 checkbox 都选中，否则都不选中。然后，我们还可以添加一个点击事件来监测所有的水果 checkbox 是否全部被选中，如果是，则自动将全选的 checkbox 选中，否则不选中。
jquery实现全选、反选、取消全部等操作(复选框checkbox)
最新发布
m0_61549984的博客
04-17 1603
this.checked){//一旦有一个未选中，则全选按钮 设置不选中。//将全选框的checked属性设置为false，也就是不选中全选框。//当前控件是选中的则设置为不选中，当前控件未选中的则设置为选中。$(this).parent().parent()是祖父节点tr。//选择class="userid"的控件，设置全部都不选中。//选择class="userid"的控件，让全部都选中。//选择class="userid"的控件，并执行循环。//选择class="userid"的控件。
jq实现checkbox全选全不选
05-23
你可以使用以下的代码来实现checkbox全选/全不选的功能： ```javascript // 全选/全不选 $('#all').click(function() { $('input[name="checkbox"]').prop('checked', this.checked); }); // 单个checkbox点击...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值