• 一个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>
  • 相关阅读:
    单元测试之mock使用
    Linux命令 diff 命令(比较文件的差异)
    @ComponentScan自动扫描组件介绍
    AES 加解密 & RSA加解密
    vxetable结合ElementUI单元格样式
    uniapp打开新的网页页签
    input等通过样式禁用
    elementui 时间选择限制当天之前的时间不可选择
    符号位扩展
    函数指针数组的运用
  • 原文地址:https://www.cnblogs.com/gbnw/p/3774904.html
Copyright © 2020-2023  润新知