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 全選、全不選、反選效果的實現代碼【推薦】就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。
新聞熱點
疑難解答
