老裴帮助关于Jquery操作复选框的小练习

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
 String path = request.getContextPath();
 String basePath = request.getScheme() + "://"
   + request.getServerName() + ":" + request.getServerPort()
   + path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
  <base href="<%=basePath%>">
  <title >CHECKBOX框的操作</title>
  <meta http-equiv="pragma" content="no-cache">
  <meta http-equiv="cache-control" content="no-cache">
  <script type="text/javascript"
   src="<%=path%>/js/jquery/jquery-1.3.2.js"></script>
 </head>
 <script type="text/javascript">
$(document).ready(function(){
var num=jQuery("input[type='checkBox']").length;   
});
/**
全部选中
*/
function selectAll(){
 var objCheckBox = jQuery("input[type='checkBox']");
 if(objCheckBox.attr("checked")){
  objCheckBox.removeAttr("checked");
 }else{
   objCheckBox.attr("checked","checked");
 }
}
/**
选中奇数个
*/
function selectEven(){
 var objCheckBox = jQuery("[name='checkBox']:even");
   objCheckBox.attr("checked","checked");
}
/**
选中偶数数个
*/
function selectOdd(){
 var objCheckBox = jQuery("[name='checkBox']:odd");
   objCheckBox.attr("checked","checked");
}

/**
反选
*/
function selectNot(){
 var objCheckBox = jQuery("input[type='checkBox']");
 objCheckBox.each(function(){
 if($(this).attr("checked")){
  $(this).removeAttr("checked");
 }else{
   $(this).attr("checked","checked");
 }
 });
}
/**
选中的内容
*/
 function selectedVal(){
    var objCheckBox = jQuery("input[type='checkBox']:checked");
    objCheckBox.each(function(){
      alert($(this).val());
    });
 }
 
 /**
 
 */
</script>
 <body>
  <center>
   <FIELDSET>
    <LEGEND>
     CHECKBOX框的操作
    </LEGEND>
    <div>
     <table>
      <tbody>
       <tr>
        <td>
         <input type="button" id="btn1" value="全选" onclick="selectAll()">
         <input type="button" id="btn2" value="取消全选"
          onclick="selectAll()">
         <input type="button" id="btn3" value="选中所有奇数"
          onclick="selectEven()">
         <input type="button" id="btn3" value="选中所有偶数"
          onclick="selectOdd()">
         <input type="button" id="btn4" value="反选" onclick="selectNot()">
         <input type="button" id="btn5" value="获得选中的所有值"
          onclick="selectedVal()"
        </td>
       </tr>
       <tr>
        <td>
         <input type="checkBox" id="ZQ" name="checkBox" value="足球" title="足球"
          checked="checked">足球
        </td>
       </tr>
       <tr>
        <td>
         <input type="checkBox" id="lQ" name="checkBox"  value="篮球" title="篮球">篮球
        </td>
       </tr>
       <tr>
        <td>
         <input type="checkBox" id="YMQ" name="checkBox"  value="羽毛球" title="羽毛球">羽毛球
        </td>
       </tr>
       <tr>
        <td>
         <input type="checkBox" id="PPQ" name="checkBox"  value="乒乓球" title="乒乓球">乒乓球
        </td>
       </tr>
       <tr>
        <td>
         <input type="checkBox" id="TQ" name="checkBox"  value="台球" title="台球">台球
        </td>
       </tr>
       <tr>
        <td>
         <input type="checkBox" id="ZQ" name="checkBox"  value="桌球" title="桌球">桌球
        </td>
       </tr>
      </tbody>
     </table>
    </div>
   </fieldset>
  </center>
 </body>
</html>

你可能感兴趣的:(JavaScript,html,jquery,cache)