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>
    多思考,多创新,才是正道!
  • 相关阅读:
    QT+Linux+FFmpeg+C/C++实现RTSP流存储为MP4视频文件
    FFmpeg接收RTSP并将H264保存为MP4
    第一次在此定义 多重定义 multiple definition of
    无法定位程序输入点_ZdaPvj于动态链接库 Qt5Core.dl Qt5Gui.dll上
    QObject::startTimer: QTimer can only be used with threads started with QThread
    ONVIF开发编译时提示stdsoap2.o中multiple definition of 'namespaces'问题的解决
    ONVIF开发(1)生成开发框架
    VUE从入门到放弃(项目全流程)————VUE
    UI库colorui的使用————小程序
    超简单详细的搭建个人网站————静态网站
  • 原文地址:https://www.cnblogs.com/shuang121/p/JQuery.html
Copyright © 2011-2022 走看看