jquery全选,jquery全不选,jquery反选

小熙415

小熙415

2016-02-19 14:33

下面是个简单易学的jquery全选,jquery全不选,jquery反选教程,图老师小编详细图解介绍包你轻松学会,喜欢的朋友赶紧get起来吧!

!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

            trtdinput type="checkbox" value="市场网1" /市场网1/td/tr

            trtdinput type="checkbox" value="市场网2" /市场网2/td/tr

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

            trtdinput type="checkbox" value="市场网3" /市场网3/td/tr    

            trtdinput 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"全部选择/abr
 a href="javascript:;" id="delAll"取消选择/abr
 a href="javascript:;" id="antiAll"反向选择/a      
 pinput type="checkbox" name="checkbox1"A
 input type="checkbox" name="checkbox1" B

 input type="checkbox" name="checkbox1"C/p
 pinput 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;inewTask.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;inewTask.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);              
     });

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

普通javascript部分:

function antiAll(){
 for(i=0;inewTask.length;i++){
  e=newTask.elements[i];
  if(e.type=='checkbox'){
   e.checked=!e.checked;
  }
 }
}

展开更多 50%)
分享

猜你喜欢

jquery全选,jquery全不选,jquery反选

Web开发
jquery全选,jquery全不选,jquery反选

jquery 实现的全选和反选

Web开发
jquery 实现的全选和反选

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

JQUERY CHECKBOX全选,取消全选,反选方法三

Web开发
JQUERY CHECKBOX全选,取消全选,反选方法三

Jquery 1.42 checkbox 全选和反选代码

Web开发
Jquery 1.42 checkbox 全选和反选代码

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

jquery checkbox全选反选效果代码

Web开发
jquery checkbox全选反选效果代码

JQUERY复选框CHECKBOX全选,取消全选

Web开发
JQUERY复选框CHECKBOX全选,取消全选

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

超强用CSS构建iframe效果

超强用CSS构建iframe效果

Linux安装PCNS软件的方法

Linux安装PCNS软件的方法
下拉加载更多内容 ↓