• JQuery中Checkbox的一些功能


    <!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>
    <script type="text/javascript" src="jquery.js"></script>
     
    <script type="text/javascript">
     $(function(){
       $(":checkbox").attr("checked",false);
                 $(":checkbox:eq(0)").click(function(){  
         if($(":checkbox:first").is(":checked")) 
        {
         $("input:checkbox").attr("checked",true);
        }else
        {
          $("input:checkbox").attr("checked",false);
        }
        });   
        $(":button:eq(0)").click(function(){   
         $("input:checkbox[name=xuanx]").attr("checked","checked");
        });
        $(":button:eq(1)").click(function(){   
         $("input:checkbox").attr("checked",false);
        });
        $(":button:eq(2)").click(function(){ 
        $(":checkbox[name=xuanx]").each(function(){
          if($(this).attr("checked"))
          {
           $(this).removeAttr("checked"); 
          }else
          {
           $(this).attr("checked",true); 
          }
         });
     
        });
        
        $(":button:eq(3)").click(function(){ 
        var result="您当前的选项是:";  
        $(":checkbox[name=xuanx]:checked").each(
         function(){
           result+=$(this).val()+" ";
          }
        )
         alert(result);
        
        });
      })
    </script>
    </head>

    <body>
    <center>
    <input type="checkbox" />全选/全不选<br /><br />
    <input type="checkbox" name="xuanx" value="选项一" />选项一&nbsp;&nbsp;&nbsp;
    <input type="checkbox" name="xuanx" value="选项二" />选项二&nbsp;&nbsp;&nbsp;
    <input type="checkbox" name="xuanx" value="选项三"  />选项三&nbsp;&nbsp;&nbsp;
    <input type="checkbox" name="xuanx" value="选项四" />选项四&nbsp;&nbsp;&nbsp;<br /><br />
    <input type="button" value="全选" />&nbsp;&nbsp;&nbsp;
    <input type="button" value="全不选" />&nbsp;&nbsp;&nbsp;
    <input type="button" value="反选" />&nbsp;&nbsp;&nbsp;
    <input type="button" value="提交" />
    </center>
    </body>
    </html>

  • 相关阅读:
    idea 配置git
    mybatisgenerator自动生成Mapper.dao.entity
    Eclipse中设置作者日期等Java注释模板
    二分图匹配KM算法
    网络流最小费用最大流
    图论tarjan
    STL的一些基本操作
    图论拓扑排序
    字符串的一些基本操作
    网络流最大流
  • 原文地址:https://www.cnblogs.com/pengchong/p/3141427.html
Copyright © 2020-2023  润新知