html5中文学习网

您的位置: 首页 > 网站及特效实例 > javascript特效 » 正文

jquery 全选、全不选、反选效果的实现代码【推荐】_jquery_

[ ] 已经帮助:人解决问题

jquery 全选、全不选、反选效果的实现代码【推荐】 HSeHTML5中文学习网 - HTML5先行者学习网

首先:引入jqueryHSeHTML5中文学习网 - HTML5先行者学习网

<title>haran.info_jquery实例_全选全不选反选_select-all_unselect-all_reverse</title><meta http-equiv="content-type"content="text/html; charset=UTF-8"/><script src="/js/jquery-1.8.3.min.js"type="text/javascript"></script><!-- 引入Jquery --> 

样式:HSeHTML5中文学习网 - HTML5先行者学习网
HSeHTML5中文学习网 - HTML5先行者学习网

<styletype="text/css"><!--#div1{  width:980px;  margin:0 auto;  position:relative;  text-align:left;  padding-left:400px;  line-height:30px;  border:1px dotted #0075c5;}li{  display:block;  list-style:none;  float:left;  position:relative;  padding-left:20px;}.clr{  height:20px;}--></style> 

body布局:HSeHTML5中文学习网 - HTML5先行者学习网
HSeHTML5中文学习网 - HTML5先行者学习网

<divid="div1">  <divclass="clr"> </div>  <!--选项开始-->  <inputtype="checkbox"/><ahref="haran.info">haran.info_脚本编程</a><br/>       <inputtype="checkbox"/><ahref="haran.info">haran.info_网站编程</a><br/>       <inputtype="checkbox"/><ahref="haran.info">haran.info_系统管理</a><br/>       <inputtype="checkbox"/><ahref="haran.info">haran.info_服务器配置</a><br/>       <inputtype="checkbox"/><ahref="haran.info">haran.info_系统运维</a><br/>       <inputtype="checkbox"/><ahref="haran.info">haran.info_博客</a><br/>       <inputtype="checkbox"/><ahref="haran.info">haran.info_首页</a><br/>  <!--选项结束-->  <!--功能按钮开始-->  <inputtype="button"id="selAll"value="全选"/>       <inputtype="button"id="unselAll"value="全不选"/>       <inputtype="button"id="reverse"value="反选 "/>   <!--功能按钮结束-->  <divclass="clr"> </div></div><!--关闭div1-->

实现功能:HSeHTML5中文学习网 - HTML5先行者学习网
HSeHTML5中文学习网 - HTML5先行者学习网

<scripttype="text/javascript">$(document).ready(function () {        $("#selAll").click(function () { //":checked"匹配所有的复选    $("#div1 :checkbox").attr("checked", true); //"#div1 :checked"之间必须有空格checked是设置选中状态。如果为true则是选中fo否则false为不选中  });        $("#unselAll").click(function () {     $("#div1 :checkbox").attr("checked", false);   });        //理解用迭代原理each(function(){})  $("#reverse").click(function () {   $("#div1 :checkbox").each(function () {  $(this).attr("checked",!$(this).attr("checked")); //!$(this).attr("checked")判断复选框的状态:如果选中则取反    });   });}); </script>

以上这篇jquery 全选、全不选、反选效果的实现代码【推荐】就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。HSeHTML5中文学习网 - HTML5先行者学习网

(责任编辑:)
推荐书籍
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助