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>

  • 相关阅读:
    显示屏分辨率自动调整例子
    该内存不能read 或written数值 叙述
    DELPHI之关于String的内存分配(引)
    Delphi关于记录文件的操作转
    用句柄操作下拉框
    SendMessage参数
    c#通过SendMessage发送消息
    Delphi内存专题 (引)
    Delphi7 中使用ODAC存取图片
    打印机状态测试
  • 原文地址:https://www.cnblogs.com/pengchong/p/3141427.html
Copyright © 2011-2022 走看看