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

最新推荐文章于 2017-12-04 15:22:45 发布

原创最新推荐文章于 2017-12-04 15:22:45 发布 · 206 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#jQuery #JavaScript #Cache #HTML #ViewUI

本文介绍如何使用JavaScript在网页中实现Checkbox的全选、取消全选、选中奇数项、选中偶数项及反选等功能，并通过实例展示。

<%@ 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>