成人精品一区二区三区中文字幕-成人精品一区二区三区-成人精品一级毛片-成人精品亚洲-日本在线视频一区二区-日本在线视频免费

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="http://www.gimoo.net/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 全選、全不選、反選效果的實現代碼【推薦】就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持綠夏網。