本文介绍如何使用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="全选" οnclick="selectAll()">
<input type="button" id="btn2" value="取消全选"
οnclick="selectAll()">
<input type="button" id="btn3" value="选中所有奇数"
οnclick="selectEven()">
<input type="button" id="btn3" value="选中所有偶数"
οnclick="selectOdd()">
<input type="button" id="btn4" value="反选" οnclick="selectNot()">
<input type="button" id="btn5" value="获得选中的所有值"
οnclick="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>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
