JQuery多選框全選

歡歡2008 2011-02-28

展開全文

<%@ 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>
    //復(fù)選框全選
    <title>My JSP 'MyJsp.jsp' starting page</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 src="../../js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
   //定義全選框的名稱為$chkall
   var $chkall = $('#checkedAll');
   var $chkarry = $('input[type="checkbox"]').not ($('#checkedAll'));//取到除全選框的其它復(fù)選框
   //全選框的實現(xiàn)函數(shù)
   $chkall.click(function(){
    var b = $(this).attr('checked');//取到全選框的值
    $chkarry.each(function(){ $(this).attr('checked', b); });//設(shè)置其它復(fù)選框值與全選框同步，實現(xiàn)全選，取消全選功能
   });
   //除了全選的其它復(fù)選框
   $chkarry.each(function(){
    $(this).click(function(){
     //先把每個其它復(fù)選框的值賦給全選框
     $chkall.attr('checked', $(this).attr('checked'));
     //再循環(huán)所有其它的復(fù)選框是否已經(jīng)全部選擇，實現(xiàn)全選與其它復(fù)選框出現(xiàn)全選情況下同步。
    //即如果其它復(fù)選都已經(jīng)選擇，則全選也選擇。
     $chkarry.each(function(index){ $chkall.attr('checked', ($chkall.attr('checked') && $chkarry.eq(index).attr('checked'))? true:false); });
    });
   });
});
</script>
</head>
<body>
   <font color="red">復(fù)選框全選</font><br>
    <input type="checkbox" name="checkbox_name[]" id="checkbox_name_1" /><br />
        <input type="checkbox" name="checkbox_name[]" id="checkbox_name_2" /><br />
        <input type="checkbox" name="checkedAll" id="checkedAll" />
        全選/取消全選
</body>
</html>