• 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>
    多思考,多创新,才是正道!
  • 相关阅读:
    vue+mongoose+node.js项目总结第三篇_实现评论和回复功能
    vue+mongoose+node.js项目总结第二篇_模拟动态发布功能
    vue+mongoose+node.js项目总结第一篇_图片文件上传
    项目(踩坑)_vue中使用input file类型的时候获取不到当前的inputFile对象
    项目(踩坑)_node 中使用session中间件报undefined的问题
    netstat
    ifconfig
    mount/umount命令
    df du sync
    ln
  • 原文地址:https://www.cnblogs.com/shuang121/p/JQuery.html
Copyright © 2020-2023  润新知