使用JQuery.js实现全选和反选

最新推荐文章于 2024-04-26 16:47:03 发布
最新推荐文章于 2024-04-26 16:47:03 发布
阅读量627 收藏
点赞数
文章标签： input function div xhtml javascript server
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ch3344/article/details/2155978
版权

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>JQuery实现全选和反选</title>
    <script language="javascript" type="text/javascript" src="js/jquery-1.2.1.pack.js"></script>
    <script type="text/javascript">
    function CheckAll()
    {
        //取消反选的选中状态
        if($("#otherCheck")[0].checked)
        {
            $("#otherCheck")[0].checked=false;
        }
        if($("#allCheck")[0].checked)
        {
            //从div1中获取所有属性type=checkbox的input元素
            $('#div1 input[@type=checkbox]').each(function(i)
            {
                this.checked=true;
            });
        }
        else
        {
            $('#div1 input[@type=checkbox]').each(function(i)
            {
                this.checked=false;
            });
        }
       
    }
    function CheckOther()
    {
    //取消全选的选中状态
        if($("#allCheck")[0].checked)
        {
            $("#allCheck")[0].checked=false;
        }
        if($("#otherCheck")[0].checked)
        {
            $('#div1 input[@type=checkbox]').each(function(i)
            {
                if(this.checked)
                {
                    this.checked=false;
                }
                else
                {
                    this.checked=true;
                }
               
            });
        }
        else
        {
             $('#div1 input[@type=checkbox]').each(function(i)
            {
                if(this.checked)
                {
                    this.checked=false;
                }
                else
                {
                    this.checked=true;
                }
               
            });
        }
    }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div id="div1">
        <input type="checkbox"/>A<br />
        <input type="checkbox"/>B<br />
        <input type="checkbox"/>C<br />
        <input type="checkbox"/>D<br />
        <input type="checkbox"/>E<br />
        <input type="checkbox"/>F<br />
        <input type="checkbox"/>G<br />
        </div>
        <div id="div2">
        <input type="checkbox" id="allCheck" οnclick="CheckAll();" />全选
        &nbsp;&nbsp
        <input type="checkbox" id="otherCheck" οnclick="CheckOther();" />反选
        </div>
    </div>
    </form>
</body>
</html>
 

ch3344
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js, jQuery实现全选、反选功能
12-29
js ，jq实现全选、反选功能： js:思路：1.点击全选按钮实现，下面内容全选，与反选 2.下面有一个没有选中时，全选按钮不勾选，当全部选中时才全选。这里引入一个计数器，来判断是否全部选中。 <!DOCTYPE html> &...
JavaScript实现全选和反选功能
weixin_51938823的博客
07-11 678
利用JS写了一个相对简单的全选和反选功能。
【JavaScript】实现全选和反选功能
weixin_62012986的博客
11-26 1674
这种情况在购物车中尤为常见
全选反选（javacript&jQuery实现有何不同）
adminsir0的博客
08-29 215
js,jQuery,全选，反选，多选框
js实现案例全选全不选(超详细)
qq_45378970的博客
09-29 1011
完整代码如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } .wrap { width: 300px; margin: 100px auto 0;
js实现全选与反选
nervelin的博客
07-04 517
源码如下： js: <script> var all = document.getElementById('j_cbAll'); var checks = document.getElementById('j_tb').getElementsByTagName('input'); //伪数组 //全选、取消全选 all.onclick = function() { // console.log(t..
jquery实现简单的全选和反选功能
01-19
首先我们看个简单的实例 <!DOCTYPE ...<... <head runat=server>...jQuery实现CheckBox全选、全不选</title> <script src=http://code.jquery.com/jquery-1.4.4.min.js type
jquery实现全选和反选小功能
01-04
很好用的使用jquery来实现的通用的全选反选功能
jquery、js操作checkbox全选反选.docx
01-19
jquery、js操作checkbox全选反选.docx
jQuery实现checkbox列表的全选、反选功能
11-26
我们在做列表的时候经常会遇到全选，反选进行批量处理问题，例如： 　我当时就是简单的实现了，然后想封装到公共的js中，封装的太烂，不好意思贴出来了（就是把实现代码之间放到公共js中，然后每个页面都用固定的id...
简单js实现全选全部选反选效果
11-11
简单js实现全选全部选反选效果
js实现全选和反选功能
10-25
js实现全选和反选功能 js实现全选和反选功能 js实现全选和反选功能 js实现全选和反选功能 js实现全选和反选功能
JS实现全选反选全不选
06-18
JS实现全选反选全不选
JS实现全选、反选
12-28
JS JS实现全选反选 全选 反选
JavaScript 实现全选、全不选和反选功能
梁辰兴的博客
12-13 2943
网页中使用到表单复选框时，如果有大量的数据需要选择，经常会用到全选或者反选功能，也可能会用到全不选功能，其实是全选的反选，下面使用原生的js来实现一下全选、全不选和反选功能。
前端学习（146）：伪类选择器checked和disable和focus
歌谣的博客
12-18 603
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
HTML5新增特性
m0_48670609的博客
04-14 1040
HTML5新增语义化标签，新增音频视频标签，新增表单标签和属性
vue快速入门（四十六）Router的安装与使用
最新发布
不起眼小菜菜的博客
04-26 612
步骤很详细，直接上教程……
vue2---修饰符
weixin_45503872的博客
04-24 1059
此时有一个问题，如果我们设置了系统修饰符，并不希望有其他的按键组合，比如我们设置ctrl修饰符，此时如果按住ctrl和其他键，然后再点击鼠标，此时也会触发事件监听，所以我需要使用其他的修饰符来设置精确匹配事件。此时People的data返回的是一个对象，不是一个地址，每一个实例拿到的都是个独立，个体的对象，互相不会数据冲突，这个就是vue组件data为什么是函数的原因。data是一个函数，返回的是一个对象，目的是为了让每个组件数据隔离，这个是JavaScript的原理，并不是vue去设计的。
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、付费专栏及课程。

余额充值