关于用jQuery实现的checkbox全选和反选功能

最新推荐文章于 2020-07-29 16:20:22 发布
最新推荐文章于 2020-07-29 16:20:22 发布
阅读量168 收藏 1
点赞数
文章标签： javascript ViewUI



用jQuery实现了checkbox的全选和反选功能，代码如下：


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>复选框全选反选</title>
<style type="text/css">
body,dl,dt,dd,p{margin:0;padding:0;}
body{font-family:Tahoma;font-size:12px;}
label,input,a{vertical-align:middle;}
label{padding:0 10px 0 5px;}
a{color:#09f;text-decoration:none;}
a:hover{color:red;}
dl{width:120px;margin:10px auto;padding:10px 5px;border:1px solid #666;border-radius:5px;background:#fafafa;}
dt{padding-bottom:10px;border-bottom:1px solid #666;}
dt label{font-weight:700;}
p{margin-top:10px;}

</style>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("#checkAll").click(function(){
if($(this).is(":checked"))
{
$(this).next("label").html("不全选");
$("input:checkbox").not($(this)).attr("checked","checked");
}
else{
$(this).next("label").html("全选");
$("input:checkbox").not($(this)).removeAttr("checked");

}

})



$("#back").click(function(){
var t=$("dd input:checkbox:checked");

$("dd input:checkbox").not(t).attr("checked","checked");
t.removeAttr("checked");
check();
})
$("dd input:checkbox").click(function(){
check();


});
function check(){
var t=$("dd input:checkbox:checked");
var m=$("dd input:checkbox");
if(t.length == m.length)
$("#checkAll").attr("checked","checked");
else
$("#checkAll").removeAttr("checked");
}
})

</script>
</head>
<body>
<dl>
<dt><input type="checkbox" id="checkAll" /><label>全选</label><a id="back">反选</a></dt>
<dd>
<p><input type="checkbox" name="item" /><label>选项（一）</label></p>
<p><input type="checkbox" name="item" /><label>选项（二）</label></p>
<p><input type="checkbox" name="item" /><label>选项（三）</label></p>
<p><input type="checkbox" name="item" /><label>选项（四）</label></p>
<p><input type="checkbox" name="item" /><label>选项（五）</label></p>
<p><input type="checkbox" name="item" /><label>选项（六）</label></p>
<p><input type="checkbox" name="item" /><label>选项（七）</label></p>
<p><input type="checkbox" name="item" /><label>选项（八）</label></p>
<p><input type="checkbox" name="item" /><label>选项（九）</label></p>
<p><input type="checkbox" name="item" /><label>选项（十）</label></p>
</dd>
</dl>
<center>1、切换全选/全不选文字；2、根据选中个数更新全选框状态；</center>

</body>
</html>



iteye_18480
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery实现全选和反选功能
qq_50587303的博客
01-23 672
使用jquery实现全选和全不选,反选
如何用jQuery实现全选 反选 功能
xiaofiy的博客
04-02 1925
需求 要求1：点击全选的按钮，让下面所有人名前的checkbox的选中状态和全选的一致 要求2：点击反选按钮，所有人名前的checkbox的选中状态取反 要求3：点击所有人名前的checkbox，判断全选的选中状态 效果如图 代码块如下 加注释 <!DOCTYPE html> <html lang="en"> <head> <meta char...
jquery实现复选框(checkbox)的全选与反选
青松之竹_Java博客
10-06 2万+
介绍一下jquery实现checkbox的全选与反选
jQuery实现全选反选 功能
qq_44984407的博客
12-26 1195
用jQuery实现全选反选 功能 要求 要求1：点击全选的checkbox，让下面所有人名前的checkbox的选中状态和全选的一致 要求2：点击反选按钮，所有人名前的checkbox的选中状态取反 要求3：点击所有人名前的checkbox，判断全选的选中状态 <!DOCTYPE html> <html lang="zh-CN"> <head> &lt...
JQuery实现全选、全不选和反选功能
热门推荐
林小米的博客
12-12 4万+
项目中需要做一个全选、全不选和反选的功能。刚接到这个需求的时候，心想很简单的一个功能，几行代码就能搞定，然而事实并非如此。下面就把我的思路说一下： 1、当点击'全选'按钮时，页面中所有的复选框都应该为选中状态，        1.1、当再次点击'全选'按钮时，所有的复选框应该是非选中状态。        1.2、当点击子复选框时，'全选'按钮应该是非选中状态。 2、当选中当前页面的
Jquery 1.42 checkbox 全选和反选代码
10-29
用jquery实现的checkbox全选和反选代码,需要的朋友可以参考下。
jQuery实现checkbox列表的全选、反选功能
11-26
然后想封装到公共的js中，封装的太烂，不好意思贴出来了（就是把实现代码之间放到公共js中，然后每个页面都用固定的id,class,现在想想我都不好意思叫他封装了），然后想到之前老大有写过这个功能去看下他怎么写的，...
jQuery实现checkbox全选、反选及删除等操作的方法详解
10-16
主要介绍了jQuery实现checkbox全选、反选及删除等操作的方法,结合实例形式形式详细分析了jQuery针对checkbox多选按钮常见批量操作相关实现技巧,需要的朋友可以参考下
jquery实现全选、反选、获得所有选中的checkbox
11-26
举了7个不同的checkbox状态，和大家一一分享。 1、全选 $("#btn1").click(function(){ $("input[name='checkbox']").attr("checked","true"); }) 2、取消全选（全不选） $("#btn2").click(function(){ $("input...
jQuery实现Checkbox全选功能
犁叔的博客
07-13 3715
jQuery实现勾选CheckAll时选中某一类全部的checkbox；当这一类中的checkbox有一个没有被选中，则CheckAll就不应该被勾选；如果所有的checkbox被选中，则CheckAll应被勾选。 形式如下图： 代码实现： $(function () { $("#checkAll")
js, jQuery实现全选、反选功能
12-29
js ，jq实现全选、反选功能： js:思路：1.点击全选按钮实现，下面内容全选，与反选 2.下面有一个没有选中时，全选按钮不勾选，当全部选中时才全选。这里引入一个计数器，来判断是否全部选中。 <!DOCTYPE html> <html> <head> <meta charset=UTF-8> <title></title> </head> <body> 全选<input type=checkbox name=allchoose id=box onclick=chk()/> <div id=lower> 苹果<input type=checkbox
jQuery全选
07-28
利用jQuery全选实现一个简单的全选功能
基于jquery实现复选框全选，反选，全不选等功能
11-26
jquery 实现全选，反选，全不选等功能，下面直接以例子进行说明。设页面有如下一组复选框和几个相关按钮（全选，反选，全不选等）： <input type="checkbox" name="fruit" value="apple" />苹果 <input type="checkbox" name="fruit" value="orange" />橘子 <input type="checkbox" name="fruit" value="banana" />香蕉 <input type="checkbox" name="fruit" value="grape" />葡萄 <input ty
jquery实现复选框的全选操作
Coding a Life
07-20 8558
最近做了个需求，需要实现列表复选框的全选/取消全选操作，由于之前对这块不是很了解，所以从网上查了一些资料，虽然有各种实现方法，但没找到直接可以套用的。自己琢磨了下，把功能实现，整理如下。 实现细节如有可改进的地方，不吝赐教。 首先是html部分的代码，这里有一个表格，表格里面有一些选项： 选项1 选项2 选项3 全选
JQuery实现列表中复选框全选反选功能封装
u011277123的博客
11-24 2394
达人科技 2016-11-24 02:18 我们在做列表的时候经常会遇到全选，反选进行批量处理问题，例如： 我当时就是简单的实现了，然后想封装到公共的js中，封装的太烂，不好意思贴出来了（就是把实现代码之间放到公共js中，然后每个页面都用固定的id,class,现在想想我都不好意思叫他封装了），然后想到之前老大有写过这个功能去看下他怎么写的，真是没有对比就没有伤害啊，这才叫封装；
checkbox全选/全不选
MuscleCode
04-05 67
[code="html"] checkbox全选/全不选 p { margin:0; font-size:12px; line-height:26px; } function check_all(obj,cName){ var checkboxs = document.getElemen...
jquery 实现checkbox全选，反选，全不选等功能代码(奇数)
YFCMS博客
05-02 668
jquery 实现全选，反选，全不选等功能，下面直接以例子进行说明,需要的朋友可以参考下 设页面有如下一组复选框和几个相关按钮（全选，反选，全不选等）： 苹果 橘子 香蕉 葡萄 则分别实现相关功能的完整代码如下： $(function(){ $('#btn1').click(function(){//全选 $("[name='frui
JQuery实现复选框CheckBox的全选、反选、提交操作
pan_junbiao的博客
07-29 2342
对复选框最基本的应用，就是对复选框进行全选、反选和提交等操作。复杂的操作需要与选项挂钩，来达到各种级联反应效果。 【示例】使用Jquery实现复选框CheckBox的全选、反选、提交操作。 （1）创建页面，创建一个表格在表格的第一列中放入一组复选框，并实现复选框的全选、反选、提交操作。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>
jquery实现全选和反选
最新发布
05-18
可以使用以下代码实现全选和反选的功能： ```javascript // 全选 $("#checkAll").click(function(){ $("input[type='checkbox']").prop("checked", true); }); // 反选 $("#checkReverse").click(function(){ $...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值