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.lang.IllegalArgumentException
    JDBC概述
    IntelliJ IDEA15导入jar包
    mySQL基础
    javascript基础
    css基础
    html笔记
    关于intelliJ idea创建servlet提示cannot resolve symbol‘servlet’的问题
    IntelliJ IDEA新建JAVA WEB项目(转载)
    winform 子报表数据源赋值
  • 原文地址:https://www.cnblogs.com/gbnw/p/3774904.html
Copyright © 2011-2022 走看看