jQuery 实现全选,反选,取消

代码如下:

<!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="reserveAll()" />
 <input type="button" value="取消" onclick="cancleAll()"/>

    <table border="1">
        <thead>
        <tr><th>选择</th>
            <th>id </th>
            <th>name</th>
            <th>age</th>
        </tr>
        </thead>
        <tbody id="tb">
        <tr>
            <td> <input type="checkbox"/></td>
            <td>1</td>
            <td>lcg</td>
            <td>22</td>
        </tr>
        <tr>
            <td><input type="checkbox"/></td>
            <td>2</td>
            <td>lcg2</td>
            <td>23</td>
        </tr>
        <tr>
            <td><input type="checkbox"/></td>
            <td>3</td>
            <td>lcg3</td>
            <td>24</td>
        </tr>
        </tbody>
    </table>

<script src="jquery-3.1.1.js" ></script>
<script>
    function checkAll(){
        $(‘#tb :checkbox‘).prop(‘checked‘,true);
    }
    function cancleAll(){
        $(‘#tb :checkbox‘).prop(‘checked‘,false)
    }
    function reserveAll(){
        $(‘#tb :checkbox‘).each(function(){
            if (this.checked){
                this.checked=false
            }else this.checked=true
        })
    }
</script>
</body>
</html>

JQuery 版反选(上面是mod版)

function reserveAll(){
        $(‘#tb :checkbox‘).each(function() {
            if ($(this).prop(‘checked‘)) {
                $(this).prop(‘checked‘, false);
            }
            else {
                $(this).prop(‘checked‘, true);
            }
         })
        }

三元运算版反选

    function cancleAll(){
        $(‘#tb :checkbox‘).prop(‘checked‘,false)
    }

        function reserveAll(){
        $(‘#tb :checkbox‘).each(function() {
        var v= $(this).prop(‘checked‘)?false:true;
            $(this).prop(‘checked‘,v)
        })
        }

时间: 2024-11-15 08:26:22

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

jquery 全选 反选 取消 批量删除

首选引入jquery 全选 //全选 function myall(){ $("input[name='d[]']").each(function(index,e){ $(this).prop('checked',true); }); } 取消 //当true改为false时为取消 // function no(){ // $("input[name='d[]']").each(function(index,e){ // $(this).prop('checked'

全选反选取消-js代码

<!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> <meta http-equiv="Content-

jQuery --checkbox全选和取消全选简洁高效的解决办法

最近在公司做了一个小项目,其中有一个全选和取消全选的这么一个模块,搞了半天找不到一种最佳的解决方案!后来通过各种努力找到了一种简洁高效的解决办法,这里想和大家分享一下.有问题的话,还望各路大神指导一二. html代码如下: <fieldset data-role="controlgroup">  <label><input type="checkbox" name="boxes" id="select_al

jquery 书写全选反选功能

书写一个后台管理中用到的全选反选功能.代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>全选反选插件</title> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/

jquery实现全选/反选功能

<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>多选框全选/反选</title> <script src="http://res01.xesimg.com/jquery/jquery.min.js">&l

全选-反选-取消

1. .checked=false/true: 作用是给方形框勾上或者取消. checkbox.checked=true; 表示勾选上了. 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display:none } .c1

jQuery实现全选/反选和批量删除

//全选/全不选 $(function(){ //初始化时候,删除按钮隐藏 $("input[name='Delete'").css("display",'none'); $("#CheckAll").bind("click",function(){ $("input[name='Check[]']").prop("checked",this.checked); //显示删除按钮 if(

jquery实现全选、取消反选、加JavaScript三元运算(三种法法实现反选)

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 9 <input type="button" value="全选" onclick="c

全选反选取消

http://www.mamicode.com/info-detail-1466046.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .edit-mode{ padding:10px; } .editing{ padding:10px;

jQuery实现全选反选功能

废话不说,直接上代码! <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript" src="jquery-3.1.1.min.js"></script> <title>Insert titl