开发者社区> jefferyjob> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

jquery全选,全不选,反选,获取选择框的值

简介: <!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"> <meta charset='
+关注继续查看
<!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">
<meta charset='utf-8'/>
<head>
    <title>全选,不全选,反选</title>
    <script src="jquery-2.1.4.min.js" type="text/javascript"></script>
</head>
<body>
<ul id="list">   
   <li><label><input type="checkbox" value="1"> 1.时间都去哪儿了</label></li> 
   <li><label><input type="checkbox" value="2"> 2.海阔天空</label></li> 
   <li><label><input type="checkbox" value="3"> 3.真的爱你</label></li> 
   <li><label><input type="checkbox" value="4"> 4.不再犹豫</label></li> 
   <li><label><input type="checkbox" value="5"> 5.光辉岁月</label></li> 
   <li><label><input type="checkbox" value="6"> 6.喜欢妳</label></li> 
</ul> 
<input type="checkbox" id="all"> 
<input type="button" value="全选" class="btn" id="selectAll">   
<input type="button" value="全不选" class="btn" id="unSelect">   
<input type="button" value="反选" class="btn" id="reverse">   
<input type="button" value="获得选中的所有值" class="btn" id="getValue"> 
</body>
<script type="text/javascript">
$(document).ready(function(){
    //全选或全不选 
    $("#all").click(function(){
        if(this.checked){
            $("input[type=checkbox]").prop("checked",true);   
        }else{    
            $("input[type=checkbox]").prop("checked",false); 
        }    
     });  
    //全选   
    $("#selectAll").click(function () { 
         $("#list :checkbox,#all").prop("checked", true);   
    });   
    //全不选 
    $("#unSelect").click(function () {   
         $("#list :checkbox,#all").prop("checked", false);   
    });   
    //反选  
    $("#reverse").click(function () {  
         $("#list :checkbox").each(function () {   
              $(this).prop("checked", !$(this).prop("checked"));   
         }); 
         allchk(); 
    }); 
     
    //设置全选复选框 
    $("#list :checkbox").click(function(){ 
        allchk(); 
    }); 
  
    //获取选中选项的值 
    $("#getValue").click(function(){
		str = '';
		n = '';
        $("#list :checkbox").each(function(){
			if(this.checked){
				str = str + n + $(this).val();
				n = ',';
			}
        });
		alert(str);
    }); 




})


function allchk(){ 
    var chknum = $("#list :checkbox").size();//选项总个数 
    var chk = 0; 
    $("#list :checkbox").each(function () {   
        if($(this).attr("checked")==true){ 
            chk++; 
        } 
    }); 
    if(chknum==chk){//全选 
        $("#all").attr("checked",true); 
    }else{//不全选 
        $("#all").attr("checked",false); 
    } 
}

</script>
</html>

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
JQuery的全选,全不选,反选!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.
911 0
Dynatable – 基于 HTML5 & jQuery 的交互表格插件
  Dynatable 一款有趣的,语义化,交互式的表格插件,使用 jQuery,HTML5 和 JSON 实现。Dynatable 的目的是提供一种简单的、可扩展的 API,能够轻松的浏览和操作大规模的数据集。
1228 0
【精心挑选】10款基于 jQuery 的图片360度旋转插件
  之前的文章向大家分享了实现网站功能的各种优秀的 jQuery 插件,今天这篇文章向大家推荐10款基于 jQuery 的图片360度旋转插件,同时还有非常详细的制作教程可以学习和参考。图片旋转展示是一种非常有趣的技术,通过把多张图片合并在一起让你可以实现360度浏览,这种效果常用于旅游网站或者酒店网站,用于展示风景或者房间的内景。
1064 0
jquery插件整理篇(七)表格插件
(1)Flexigrid Flexigrid是一个类似于Ext Gird,但基于jQuery开发的Grid。它具有的功能包括:可以调整列宽,合并列标题,分页,排序,显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。
899 0
推荐18款非常棒的 jQuery 表格插件
  我们一般都是用HTML表格来显示结构化数据,如今有很多的 jQuery 表格插件可以帮助我们更好的组织和控制表格数据,增强表格的功能和操作。今天要与大家分享的是18个非常优秀的 jQuery 表格插件,有用到朋友可以参考一下。
1345 0
+关注
jefferyjob
继承,是幸福的延续;重载,是幸福的重生。
50
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载