zoukankan      html  css  js  c++  java

  • checkbox 多选框 ：jquery之全选、全不选、反选

        

    javascriptjqueryselectAll
    [html] view plaincopy
     
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    2. <html xmlns="http://www.w3.org/1999/xhtml">  
    3. <head>  
    4.     <title>全选，不全选，反选</title>  
    5.     <script src="../js/jquery-1.6.2.min.js" type="text/javascript"></script>  
    6.     <script language="javascript" type="text/javascript">  
    7.         $(function () {  
    8.             $("#selectAll").click(function () {//全选  
    9.                 $("#playList :checkbox").attr("checked", true);  
    10.             });  
    11.   
    12.             $("#unSelect").click(function () {//全不选  
    13.                 $("#playList :checkbox").attr("checked", false);  
    14.             });  
    15.   
    16.             $("#reverse").click(function () {//反选  
    17.                 $("#playList :checkbox").each(function () {  
    18.                     $(this).attr("checked", !$(this).attr("checked"));  
    19.                 });  
    20.             });  
    21.         });  
    22.     </script>  
    23. </head>  
    24. <body>  
    25.     <div id="playList">  
    26.         <input type="checkbox" value="歌曲1" />歌曲1<br />  
    27.         <input type="checkbox" value="歌曲2" />歌曲2<br />  
    28.         <input type="checkbox" value="歌曲3" />歌曲3<br />  
    29.         <input type="checkbox" value="歌曲4" />歌曲4<br />  
    30.         <input type="checkbox" value="歌曲5" />歌曲5<br />  
    31.         <input type="checkbox" value="歌曲6" />歌曲6  
    32.     </div>  
    33.     <input type="button" value="全选" id="selectAll" />  
    34.     <input type="button" value="全不选" id="unSelect" />  
    35.     <input type="button" value="反选" id="reverse" />  
    36. </body>  
    37. </html>  
  • 相关阅读:
    搜索专题: HDU1242 Rescue
    搜索专题: HDU2102 A计划
    搜索 问题 D: 神奇密码锁
    HNUSTOJ-1674 水果消除(搜索或并查集)
    搜索专题：问题 E: 挑战ACM迷宫
    【网络流24题】【洛谷P4013】数字梯形问题【费用流】
    【网络流24题】【洛谷P4013】数字梯形问题【费用流】
    【牛客想开了大赛2 B】n的约数【打表】
    【牛客想开了大赛2 B】n的约数【打表】
    【牛客想开了大赛2 A】平面【数论，数学】
  • 原文地址：https://www.cnblogs.com/hannover/p/4109777.html
Copyright © 2011-2022 走看看