十分钟玩转jQuery---多选、反选、取消

news/2024/7/10 23:34:55 标签: js, javascript, css, 前端, jquery

这里给大家推荐一款免费迭代 二开便捷的商城项目:源码直通车>>>

话不多说  直接上实例

javascript"><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

    <input type='button' value="全选" onclick="checkall()">
    <input type='button' value="反选" onclick="reverseall()">
    <input type='button' value="取消" onclick="cancleall()">

    <table border="1">
        <thead>
            <tr>
                <th>选项</th>
                <th>ip</th>
                <th>端口</th>

            </tr>
        </thead>
        <tbody id="tb">
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.2</td>
                <td>81</td>
            </tr><tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.3</td>
                <td>83</td>
            </tr>

        </tbody>

    </table>





    <script src="jquery-1.12.4.js"></script>
    <script>
        function checkall() {
            $('#tb :checkbox').prop('checked',true);
        }

        function cancleall() {
            $('#tb :checkbox').prop('checked',false)
        }

        function reverseall() {
            $('#tb :checkbox').each(function () {
             //this代指当前循环的每一个元素,这个this其实是dom对象
            //1-dom的写法
//            if(this.checked){
//                this.checked = false;
//            }else {
//                this.checked = true;
//            }

            //2-jQuery的写法
//            if($(this).prop('checked')){
//                $(this).prop('checked',false);
//            }else {
//                $(this).prop('checked',true);
//            }

            //3-三元运算
            var v = $(this).prop('checked')? false:true;
            $(this).prop('checked',v)

            })

        }
            
         
    </script>
</body>
</html>

 


http://www.niftyadmin.cn/n/908790.html

相关文章

面试问题

面试问题&#xff1a;线程安全、线程锁&#xff08;synchronized , lock&#xff09;,JUC类库&#xff08;concurrenthashmap&#xff09;, mysql引擎&#xff08;myisam与innodb&#xff09;,jvm&#xff08;GC&#xff09;算法与机制 , 数据结构&#xff08;二分查找法&#…

十分钟玩转jQuery---三级联动

这里给大家推荐一款免费迭代 二开便捷的商城项目&#xff1a;源码直通车>>> 话不多说 直接上实例 <!DOCTYPE html> <html lang"en"> <head> <meta http-equiv"Content-Type" content"text/html; charsetUTF-8"&…

Android PullToRefreshExpandableListView的点击事件

这几天做项目的时候用到了一个开源的下拉刷新的框架&#xff08;需要的朋友可以加我Q:359222347&#xff09;。其中我使用PullToRefreshExpandableListView的时候发现这个东西没有setOnChildClickListener&#xff08;&#xff09;的点击方法。刚刚在一个国外的网站上看到一个解…

十分钟玩转jQuery---浏览器检测

这里给大家推荐一款免费迭代 二开便捷的商城项目&#xff1a;源码直通车>>> 话不多说 直接上实例 if( $.browser.safari) //检测Safari if ($.browser.msie && $.browser.version > 6 ) //检测IE6及之后版本 if ($.browser.msie && $.browser.ve…

升讯威微信营销系统开发实践:(1)功能概要与架构设计( 完整开源于 Github)...

GitHub&#xff1a;https://github.com/iccb1013/Sheng.WeixinConstruction因为个人精力时间有限&#xff0c;不会再对现有代码进行更新维护&#xff0c;不过微信接口比较稳定&#xff0c;经测试至今没有变化&#xff0c;功能依然全部可用&#xff0c;你可以在此基础上&#xf…

1个类,2个方法,3句代码,完成微信公众号开发的极简流程

这里给大家推荐一款免费迭代 二开便捷的商城项目&#xff1a;源码直通车>>> 概述 Senparc.Weixin SDK 是一直以来大部分 .NET 微信开发者的首选微信 SDK&#xff08;以下统称 SDK&#xff09;&#xff0c;SDK 目前已经支持了微信公众号、小程序、企业微信、微信支付等…

洛谷P1113 杂物

P1113 杂务 251通过441提交题目提供者该用户不存在标签图论递推难度普及/提高-提交该题 讨论 题解 记录 最新讨论 为什么会只有10分&#xff1f;题目描述 John的农场在给奶牛挤奶前有很多杂务要完成&#xff0c;每一项杂务都需要一定的时间来完成它。比如&#xff1a;他们要将奶…

什么是跨域以及几种简单解决方案

实际应用项目&#xff1a;http://github.crmeb.net/u/long 什么是跨域&#xff1f; 要明白什么是跨域之前&#xff0c;首先要明白什么是同源策略&#xff1f; 同源策略就是用来限制从一个源加载的文档或脚本与来自另一个源的资源进行交互。那怎样判断是否是同源呢&#xff1f…