利用jQuery實現CheckBox全選/全不選/反選

時間 2019-11-11

標籤利用 jquery 實現 checkbox 全選全不欄目 JQuery 简体版

原文原文鏈接

jQuery有些版本中實現CheckBox全選/全不選/反選會有bug，經測試jquery-1.3.1.js–>測試經過，jquery-1.5.1.js–>測試不經過。javascript

實現CheckBox全選/全不選/反選代碼以下：html

<%@ page language="java" pageEncoding="UTF-8"%>
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
  <title>複選框全選/全不選/反選</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 複選框的name
   */
  function allCkb(items){
     $('[name='+items+']:checkbox').attr("checked", true);
  }
     
  /**
   * 全不選
   * 
   */
  function unAllCkb(){
     $('[type=checkbox]:checkbox').attr('checked', false);
  }
     
  /**
   * 反選
   * 
   * items 複選框的name
   */
  function inverseCkb(items){
     $('[name='+items+']:checkbox').each(function(){
        //此處用jq寫法頗顯囉嗦。體現不出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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。