zoukankan      html  css  js  c++  java
  • 一个checkbox 用jquery实现全选、全不选

    之前因为一个很小的错误弄了很久,现在才做好。

    效果图:

    肯定还有更简单的方法。

     1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Checkbox.aspx.cs" Inherits="WebApp.Test.Checkbox" %>
     2 
     3 <!DOCTYPE html>
     4 
     5 <html xmlns="http://www.w3.org/1999/xhtml">
     6 <head runat="server">
     7     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     8     <title></title>
     9     <script src="../Scripts/jquery-1.8.0.min.js"></script>
    10     <script type="text/javascript">
    11         $(function () {
    12             jQueryCheckAll();
    13         })
    14         function jQueryCheckAll() {
    15             var checkAll = $('#checkedAll');
    16             var items = $(':checkbox[name=item]');
    17            
    18             checkAll.click(function () {
    19                 if ($(this).attr('checked')) {
    20                     items.each(function () {
    21                         $(this).attr('checked', true);
    22                     })                  
    23                 }
    24                 else {
    25                     items.each(function () {
    26                         $(this).attr('checked', false);
    27                     })
    28                 }
    29                 items.click(function () {
    30                     checkAll.attr("checked", items.length == $(':checkbox[name=item]:checked').length ? true : false);
    31                 });
    32             })      
    33         }      
    34     </script>
    35 </head>
    36 <body>
    37     <form id="form1" runat="server">
    38         <div>
    39             你爱好的运动是?
    40             <input type="checkbox" id="checkedAll"/>全选/全不选<br/>
    41             <input type="checkbox" name="item" value="足球" />足球
    42             <input type="checkbox" name="item" value="篮球" />篮球
    43             <input type="checkbox" name="item" value="羽毛球" />羽毛球
    44             <input type="checkbox" name="item" value="乒乓球" />乒乓球
    45         </div>
    46     </form>
    47 </body>
    48 </html>
  • 相关阅读:
    java异常
    Swfmill概述
    AS3中e4x用法纲要
    抽象工厂模式(Abstract Factory)
    动态绑定、抽象类、接口
    Form中Trigger的执行顺序
    Form 中FND_Message的用法总结
    Form属性、内置子程序、触发器、系统变量
    Oracle EBS R12 XML数据表格的Excel脚本报表 PLUS :问题杂烩
    Oralce EBS Alert
  • 原文地址:https://www.cnblogs.com/gbnw/p/3774904.html
Copyright © 2011-2022 走看看