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

前端技术 2023/09/01 JavaScript

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

首先：引入jquery

<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 -->

样式：

<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布局：

<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-->

实现功能：

<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 全选、全不选、反选效果的实现代码【推荐】就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持phpstudy。

本文地址：https://www.stayed.cn/item/2425

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案