zoukankan      html  css  js  c++  java
  • jquery全选,jquery全不选,jquery反选

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head>
        <title>全选,不全选,反选</title>
        <script src="js/jquery.js" type="text/javascript"></script>
        <script language="javascript" type="text/javascript">
            $(function () {
                $("#selectAll").click(function () {//全选
                    $("#playList :checkbox").attr("checked", true);
                });
    
                $("#unSelect").click(function () {//全不选
                    $("#playList :checkbox").attr("checked", false);
                });
    
                $("#reverse").click(function () {//反选
                    $("#playList :checkbox").each(function () {
                        $(this).attr("checked", !$(this).attr("checked"));
                    });
                });
            });
        </script>
    </head>
    <body>
        <div id="playList">
    <table>
    <tr><td><input type="checkbox" value="市场网1" />市场网1</td></tr>
     <tr><td><input type="checkbox" value="市场网2" />市场网2</td></tr>
    <tr><td><input type="checkbox" value="市场网3" />市场网3</td></tr>    
    <tr><td><input type="checkbox" value="市场网4" />市场网4</td></tr>
      </table>     
        </div>
        <input type="button" value="全选" id="selectAll" />
        <input type="button" value="全不选" id="unSelect" />
        <input type="button" value="反选" id="reverse" />
    </body>
    </html>
    方法二:
     <a href="javascript:;" id="all">全部选择</a><br>
     <a href="javascript:;" id="delAll">取消选择</a><br>
     <a href="javascript:;" id="antiAll">反向选择</a>      
     <p><input type="checkbox" name="checkbox1">A
     <input type="checkbox" name="checkbox1"> B
     <input type="checkbox" name="checkbox1">C</p>
     <p><input type="checkbox" name="checkbox1">D
     <input type="checkbox" name="checkbox1">E
     <input type="checkbox" name="checkbox1">F</p>
     
    Jquery部分 
    //全部选择
     $("#all").click(function(){  
      $("input[name='checkbox1']").each(function(){
       $(this).attr("checked",true);
      });  
     });
    普通javascirpt部分:
    function checkAll(){
     for(i=0;i<newTask.length;i++){
      e=newTask.elements[i];
      if(e.type=='checkbox'){
       if(e.checked=false){
        e.checked=true;
       }else{
        e.checked=true;
       }
      }
     } 
    }
    
    Jquery部分:
    //取消选择
     $("#delAll").click(function(){  
      $("input[name='checkbox1']").each(function(){
       $(this).attr("checked",false);
      });  
     });
    普通javascript部分:
    function delAll(){
     for(i=0;i<newTask.length;i++){
      e=newTask.elements[i];
      if(e.type=='checkbox'){
       if(e.checked=true){
        e.checked=false;
       }
       else{
        e.checked=false;
       }
      }
     }
    }
     
    Jquery部分: 
    //反向选择
     $("#antiAll").click(function(){
      $("input[name='checkbox1']").each(function(){
       $(this).attr("checked",!this.checked);              
         });
    普通javascript部分:
    function antiAll(){
     for(i=0;i<newTask.length;i++){
      e=newTask.elements[i];
      if(e.type=='checkbox'){
       e.checked=!e.checked;
      }
     }
    }
  • 相关阅读:
    深入解析TRUNCATE TABLE – 手工修复和验证过程
    python 2维数组
    15个 MySQL 基础面试题,DBA 们准备好了吗?
    15个 MySQL 基础面试题,DBA 们准备好了吗?
    15个 MySQL 基础面试题,DBA 们准备好了吗?
    15个 MySQL 基础面试题,DBA 们准备好了吗?
    移动App性能测评与优化1.4.4 多进程应用
    移动App性能测评与优化1.4.4 多进程应用
    移动App性能测评与优化1.4.4 多进程应用
    移动App性能测评与优化1.4.4 多进程应用
  • 原文地址:https://www.cnblogs.com/JerryWang24/p/3772105.html
Copyright © 2011-2022 走看看