zoukankan      html  css  js  c++  java
  • 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>
    多思考,多创新,才是正道!
  • 相关阅读:
    2019第二周作业
    2019 编程总结
    寒假作业2编程总结
    2018秋季学习总结
    喜欢的老师
    人生路上对我影响最大的三位老师
    自我介绍
    抓老鼠啊~亏了还是赚了?
    币值转换
    打印沙漏
  • 原文地址:https://www.cnblogs.com/shuang121/p/JQuery.html
Copyright © 2011-2022 走看看