<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>複選框全選</title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript">
</script>
<script type="text/javascript">
$(function () {
$("#Checkbox1").click(function () {
$('input[name="Checkbox2"]').attr("checked", this.checked);
var subBox = $('input[name="Checkbox2"]')
subBox.click(function () {
$("#Checkbox1").attr("checked",subBox.length==$('input[name="Checkbox2"]:checked').length?true:false);
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td>
<input id="Checkbox1" type="checkbox" />
</td>
</tr>
<tr>
<td>
<input name="Checkbox2" type="checkbox" />
</td>
<td>
<input name="Checkbox2" type="checkbox" />
</td>
<td>
<input name="Checkbox2" type="checkbox" /> </td>
</tr>
</table>
</div>
</form>
</body>
</html>
javascript實現複選框的全選功能
複選框的全選功能在Web開發中使用非常頻繁，而實現的方法一般分爲兩種：客戶端實現與服務器端實現。
服務器端實現需要與服務器端交互，因此效率較差。今天向大家介紹一下用腳本在客戶端實現此功能的方法。
效果如圖
![]()
當點擊按鈕或全選複選框時，上表中的所有數據被鉤上。
下面是js代碼：
調用時：
![]()
<input id="chk_SelectALL" type="checkbox" οnclick="selectAll(this)" />
服務器端實現需要與服務器端交互，因此效率較差。今天向大家介紹一下用腳本在客戶端實現此功能的方法。
效果如圖
當點擊按鈕或全選複選框時，上表中的所有數據被鉤上。
下面是js代碼：
<script type="text/javascript">
//根據傳入的checkbox的選中狀態設置所有checkbox的選中狀態
function selectAll(obj)
{
var allInput = document.getElementsByTagName("input");
//alert(allInput.length);
var loopTime = allInput.length;
for(i = 0;i < loopTime;i++)
{
//alert(allInput[i].type);
if(allInput[i].type == "checkbox")
{
allInput[i].checked = obj.checked;
}
}
}
</script>調用時：
<input id="chk_SelectALL" type="checkbox" οnclick="selectAll(this)" />全選就可實現了。
由於是在客戶端完成此效果，所以控件不能使用服務器端控件，否則無效。
由於是在客戶端完成此效果，所以控件不能使用服務器端控件，否則無效。