快捷導(dǎo)航

利用jQuery實現(xiàn)CheckBox全選/全不選/反選的簡單代碼

更新時間：2016年05月31日 11:41:31 投稿：jingxian

下面小編就為大家?guī)硪黄胘Query實現(xiàn)CheckBox全選/全不選/反選的簡單代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

jQuery有些版本中實現(xiàn)CheckBox全選/全不選/反選會有bug，經(jīng)測試jquery-1.3.1.js–>測試通過，jquery-1.5.1.js–>測試不通過。

實現(xiàn)CheckBox全選/全不選/反選代碼如下：

<%@ page language="java" pageEncoding="UTF-8"%>
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
 <title>復(fù)選框全選/全不選/反選</title>
 <meta http-equiv="pragma" content="no-cache">
 <meta http-equiv="cache-control" content="no-cache">
 <meta http-equiv="expires" content="0">
 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 <meta http-equiv="description" content="This is my page">
 <script type="text/javascript"
  src="<%=request.getContextPath()%>/js/jquery-1.3.1.js"></script>
 <script type="text/javascript"> 
 /**
  * 全選
  * 
  * items 復(fù)選框的name
  */
 function allCkb(items){
   $('[name='+items+']:checkbox').attr("checked", true);
 }
   
 /**
  * 全不選
  * 
  */
 function unAllCkb(){
   $('[type=checkbox]:checkbox').attr('checked', false);
 }
   
 /**
  * 反選
  * 
  * items 復(fù)選框的name
  */
 function inverseCkb(items){
   $('[name='+items+']:checkbox').each(function(){
    //此處用jq寫法頗顯啰嗦。體現(xiàn)不出JQ飄逸的感覺。
   //$(this).attr("checked", !$(this).attr("checked"));
  
   //直接使用js原生代碼，簡單實用
   this.checked=!this.checked;
   });
 }
 
 </script>
 </head>
 
 <body>
    <input type='checkbox' name='ckb' value="0"/>白羊座
    <input type='checkbox' name='ckb' value="1"/>獅子座
    <input type='checkbox' name='ckb' value="2"/>水瓶座
    <input type='checkbox' name='ckb' value="3"/>射手座<br/>
    <input type="button" onclick="allCkb('ckb')" value="全　選"/>
  <input type="button" onclick="unAllCkb()" value="全不選"/>
  <input type="button" onclick="inverseCkb('ckb')" value="反　選"/> 
 </body>
</html>