jquery实现全选,取消,反选

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"        "http://www.w3.org/TR/html4/loose.dtd"><html><head>    <title>复选多选反选</title>    <meta charset="UTF-8">    <script src="jquery-3.4.1.js"></script></head><body><div>    <button onclick="selectAll()">全选</button>    <button onclick="cancel()">取消</button>    <button onclick="reverse()">反选</button></div><table border="1">    <tr>        <td><input type="checkbox"> </td>        <td>111</td>    </tr>    <tr>        <td><input type="checkbox"></td>        <td>222</td>    </tr>    <tr>        <td><input type="checkbox"></td>        <td>333</td>    </tr>

</table><script>    function selectAll() {        $(‘table :checkbox‘).each(function () {            $(this).prop(‘checked‘,true);

        })

    }    function cancel(){        $(‘table :checkbox‘).each(function () {            $(this).prop(‘checked‘,false);

        })    }    function reverse(){        $(‘table :checkbox‘).each(function () {            if($(this).prop(‘checked‘)){                $(this).prop(‘checked‘,false);

            }else{                $(this).prop(‘checked‘,true);

            }

        })

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



原文地址:https://www.cnblogs.com/startl/p/12293420.html

时间: 2024-11-08 22:49:10

jquery实现全选,取消,反选的相关文章

使用jQuery练习全选-取消-反选-显示选择内容等功能代码

<span style="font-size:24px;color:#ff0000;">部长练习全选-取消-反选-显示选择内容等功能代码:</span> <!doctype html> <html> <head> <meta charset="gb2312"> <title>部长练习全选-取消-反选-显示选择内容等功能</title> <script src=&qu

利用JQuery实现全选和反选的几种方法

前面介绍了利用JavaScript实现全选功能,其中也有要注意的几点,现在讲解下在JQuery怎么实现全选和反选,下面提供了两种方法实现. 如图:要实现的效果是点击全选框全部选中,再点击全部不选中 方法一思路:1.导入jQuery库,这个网上可以下载,是免费开源的,2.设置class为fruit,通过prop设置它们的属性. 方法一:jQuery代码: 1 //定义标识,true表示选中 2 var chkall = true; 3 $(function () { 4 //全选按钮设置点击事件

jquery checbox 全选,反选

<body> <input type="checkbox" id="ckAll" />check all<br /> <input type="checkbox" name="sub" />1<br /> <input type="checkbox" name="sub"/>2<br /> <inp

jQuery实现全选、反选和不选功能

HTML 我们的页面上有一个歌曲列表,列出多行歌曲名称,并匹配复选框供用户选择,并且在列表下方有一排操作按钮. 1 2 3 4 5 6 7 8 9 10 11 12 13 <ul id="list">   <li><label><input type="checkbox" value="1"> 1.时间都去哪儿了</label></li>   <li><la

jquery实现全选和反选功能

jQuery操作复选框的选中和不选中状态非常简单,使用attr()来设置"checked"属性的值,true未选中,false为未选中,在整个全选.反选过程中注意处理全选复选框的选中状态,以及获取选中选项的值. <ul id="list"> <li><label><input type="checkbox" value="1"> 1.我是记录来的呢</label>&l

jquery 实现全选和反选

全选和反选 <input type="checkbox" id="chk_all" /> <input type="checkbox" name="newsletter" value="0" /> <input type="checkbox" name="newsletter" value="4" /> <

jQuery 实现全选,反选,取消

代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" value="全选" onclick="checkAll()&qu

JQuery实现全选、反选和取消功能

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>JQ实现正.反选</title> 6 </head> 7 <body> 8 <table border="1px" style="width: 200px;margin-bott

CMDB项目CURD组件之全选取消反选和编辑模式

$(':checked') 选中的所有元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.css