zoukankan      html  css  js  c++  java
  • 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>

  • 相关阅读:
    Angular InjectionToken
    ionic 使用入门
    EFcore 横向分表
    .Netcore 默认认证授权
    anut 设计资源
    Aunt entity
    百度人脸真人认证
    Angular 省市区级联
    apache安装
    ppb|ppm
  • 原文地址:https://www.cnblogs.com/pengchong/p/3141427.html
Copyright © 2011-2022 走看看