zoukankan      html  css  js  c++  java
  • 全选,不选,反选 jquery

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
     <!--   引入jQuery -->
    <script src="http://libs.baidu.com/jquery/1.3.1/jquery.js" type="text/javascript"></script>
     <script type="text/javascript">
      $(function(){
         //全选
         $("#CheckedAll").click(function(){
             $('[name=items]:checkbox').attr('checked', true);
         });
         //不选
         $("#CheckedNo").click(function(){
            $('[type=checkbox]:checkbox').attr('checked', false);
         });
         //反选
         $("#CheckedRev").click(function(){
              $('[name=items]:checkbox').each(function(){
                this.checked=!this.checked;
              });
         });
         //输出值
        $("#send").click(function(){
            var str="你选中的是:
    ";
            $('[name=items]:checkbox:checked').each(function(){
                str+=$(this).val()+"
    ";
            })
            alert(str);
        });
      })
    
      </script>
    </head>
    <body>
    <form method="post" action="">
       你爱好的运动是?
       <br/>
        <input type="checkbox" name="items" value="足球"/>足球
        <input type="checkbox" name="items" value="篮球"/>篮球
        <input type="checkbox" name="items" value="羽毛球"/>羽毛球
        <input type="checkbox" name="items" value="乒乓球"/>乒乓球
       <br/>
        <input type="button" id="CheckedAll" value="全 选"/>
        <input type="button" id="CheckedNo" value="全不选"/>
        <input type="button" id="CheckedRev" value="反 选"/> 
    
        <input type="button" id="send" value="提 交"/> 
    </form>
    </body>
    </html>
  • 相关阅读:
    我们的CPU遭到攻击[LOJ558]
    历史[ZJOI2018]
    字符串[LOJ6517]
    奥运公交[LOJ3255]
    BLO-Blockade[POI2008]
    压力[BJOI2013]
    Earthquake[USACO01OPEN]
    暴力写挂[CTSC2018]
    极简教程:数据结构与算法(二)
    DllRegisterServer的调用失败的问题解决方法
  • 原文地址:https://www.cnblogs.com/Xuman0927/p/5534116.html
Copyright © 2011-2022 走看看