• JQuery对checkbox操作 (循环)


         下面是Jquery对checkbox的一些操作,全选,反选,取消全选等等...

        

    View Code
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="DemoCheckBox.aspx.cs" Inherits="DemoCheckBox" %>

    <!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 runat="server">
        
    <title>无标题页</title>
        <script src="js/jquery-1.6.min.js" type="text/javascript"></script>
       <script type="text/javascript">
         jQuery(
    function($){
         
    //全选
           $("#btn1").click(function(){
              $(
    "input[name='checkbox']").attr("checked","true");
           })
           
    //取消全选
           $("#btn2").click(function(){
            $(
    "input[name='checkbox']").removeAttr("checked");
           })
           
    //选中所有基数
           $("#btn3").click(function(){
              $(
    "input[name='checkbox']:even").attr("checked","true");
           })
           
    //选中所有偶数
           $("#btn6").click(function(){
              $(
    "input[name='checkbox']:odd").attr("checked","true");
           })
            
    //反选
           $("#btn4").click(function(){
              $(
    "input[name='checkbox']").each(function(){
                
    if($(this).attr("checked"))
                {
                   $(
    this).removeAttr("checked");
                }
                
    else
                {
                 $(
    this).attr("checked","true");  
                }
              
              })
           }) 
           
    //或许选择项的值
           var aa="";
           $(
    "#btn5").click(function(){
                  $(
    "input[name='checkbox']:checkbox:checked").each(function(){
                  aa
    +=$(this).val()
               
              }) 
              document.write(aa);
           })
            
         })
       
    </script>
    </head>
    <body>
        
    <form id="form1" runat="server">
        
    <div>
       
    <input type="button" id="btn1" value="全选">
       
    <input type="button" id="btn2" value="取消全选">
       
    <input type="button" id="btn3" value="选中所有奇数">
         
    <input type="button" id="btn6" value="选中所有偶数">
       
    <input type="button" id="btn4" value="反选">
       
    <input type="button" id="btn5" value="获得选中的所有值">
       
    <br>
       
    <input type="checkbox" name="checkbox" value="checkbox1">
       checkbox1
       
    <input type="checkbox" name="checkbox" value="checkbox2">
       checkbox2
       
    <input type="checkbox" name="checkbox" value="checkbox3">
       checkbox3
       
    <input type="checkbox" name="checkbox" value="checkbox4">
       checkbox4
       
    <input type="checkbox" name="checkbox" value="checkbox5">
       checkbox5
       
    <input type="checkbox" name="checkbox" value="checkbox6">
       checkbox6
       
    <input type="checkbox" name="checkbox" value="checkbox7">
       checkbox7
       
    <input type="checkbox" name="checkbox" value="checkbox8">
     checkbox8
        
    </div>
        </form>
    </body>
    </html>
    多思考,多创新,才是正道!
  • 相关阅读:
    hdu 2141 二分搜索
    什么是你的核心竞争力之一?
    Ubuntu系统开机后显示器提示“不能显示此视频模式,请将电脑显示输入设置为1920×1080@60Hz”
    [置顶] java高级工程师struts的内部运行机制详解
    一步步理解Linux进程(3)内核中进程的实现
    2013年4月19日佳都新太笔试题+解答
    Android 通过Service单独进程模仿离线推送 Server Push
    缓存研究
    解决MDK4以上版本没法对STM32软件仿真
    windows调试器之Visual C++
  • 原文地址:https://www.cnblogs.com/shuang121/p/JQuery.html
Copyright © 2020-2023  润新知