• checkbox多选


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title> New Document </title>
    <meta name="Generator" content="EditPlus">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <script language="JavaScript">
    <!--
    var ii = 0;
    function boxnum(){
        var box = document.getElementsByName("c");    
        for(var i=0;i<box.length;i++){
            box[i].onclick = function chk(){        
            if(this.checked && ii <= 5) ii += 1;
            if(! this.checked) ii -= 1;
            if(ii>5){ ii -=1; this.checked = false;alert('最多不能超多5个主营项目!请重新选择!');}
        }
        }
        
    }
    window.onload = boxnum;
    //-->
    </script>
    </head>

    <body>
    <table cellspacing="0" border="1" width="200" >
        <tr>
            <td><input type="checkbox" name="c"></td>
            <td><input type="checkbox" name="c"></td>
            <td><input type="checkbox" name="c"></td>
        </tr>
        <tr>
            <td><input type="checkbox" name="c"></td>
            <td><input type="checkbox" name="c"></td>
            <td><input type="checkbox" name="c"></td>
        </tr>
    </body>
    </html>

    第二种方法

    <!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=gb2312" />
    <title>无标题文档</title>
    <script>

    function boxnum(obj){
        
    }

    function checknum(){
    var e,srcE
      e=window.event?window.event:e; 
      srcE=e.srcElement?e.srcElement:e.target; 
      if(!srcE)return; 
    if(String(srcE.tagName).toLowerCase()!="input"||String(srcE.type).toLowerCase()!="checkbox")return;
    var box = document.form1.elements['checkbox3'];
        var ii = 0
        for(var i=0;i<box.length;i++){
            if(box[i].checked){ii++;}
        }
        if(ii>5){
            alert('最多不能超多5个主营项目!请重新选择!');
            srcE.checked=false;
                    }
    }
    document.onkeydown=document.onchange=document.onclick=checknum; 
    </script>
    </head>

    <body>
    <form id="form1" name="form1" method="post" action="">
      <table width="520" height="221" border="1">
        <tr>
          <td><label>
            <input type="checkbox" name="checkbox3" value="checkboxa" />
           1  
           <input type="checkbox" name="checkbox3" value="checkboxaa" />
           2
            <input type="checkbox" name="checkbox3" value="checkboxaaa" />
            3
            <input type="checkbox" name="checkbox3" value="checkboxaaaa" />
            4
            <input type="checkbox" name="checkbox3" value="checkboxcv" />
            5
            <input type="checkbox" name="checkbox3" value="checkboxcvb" />
            6
            <input type="checkbox" name="checkbox3" value="checkboxcvbcvb" />
            7
            <input type="checkbox" name="checkbox3" value="checkboxcvbcvbcv" />
            8
            <input type="checkbox" name="checkbox3" value="checcvb" />
            9
            <input type="checkbox" name="checkbox3" value="checvb" />
            10
            <input type="checkbox" name="checkbox3" value="chcvbox" />
            <input type="checkbox" name="checkbox3" value="chcvbcvbox" />
            <input type="checkbox" name="checkbox3" value="ccvbcvbcvox" />
          </label></td>
          <td> </td>
          <td> </td>
        </tr>
        <tr>
          <td><input type="button" name="Submit" value="按钮" onclick="boxnum('checkbox3')" /></td>
          <td> </td>
          <td> </td>
        </tr>
        <tr>
          <td> </td>
          <td> </td>
          <td> </td>
        </tr>
      </table>
    </form>
    </body>
    </html>

    第三种方法

     

    <form method="post" action="" name="form1" id="form1">
        <input type="checkbox" name="a" />
        <input type="checkbox" name="a" />
        <input type="checkbox" name="a" />
        <input type="checkbox" name="a" />
        <input type="checkbox" name="a" />
        <input type="checkbox" name="a" />
        <input type="checkbox" name="a" />
        <input type="checkbox" name="a" />
        <input type="checkbox" name="a" />
    </form>
    <script language="javascript" type="text/javascript">
        var m_count = 0;
        document.getElementById("form1").onclick = function(e){
            ele = (document.all)?window.event.srcElement:e.target;
            if (ele.nodeName.toLowerCase()=="input" && ele.type.toLowerCase()=="checkbox" && ele.checked)
                m_count++;
            if (ele.nodeName.toLowerCase()=="input" && ele.type.toLowerCase()=="checkbox" && !ele.checked)
                m_count--;
            if(m_count>5){
                m_count--;
                alert("最多不能超多5个主营项目!");
                return false;
            }
            return true;
        }
    </script>

      protected void chkAll_CheckedChanged(object sender, EventArgs e)
        {
            try
            {
                foreach (Control ctrl in Page.Form.Controls)
                {
                    if (ctrl is System.Web.UI.WebControls.CheckBox)
                    {
                        ((CheckBox)ctrl).Checked = chkAll.Checked;                   
                    }
                }
            }
            catch (Exception ex)
            {
                throw ex;
            }
        }
    var   isChecked=true  
      function   chALl()  
      {  
      o   =   document.getElementsByTagName("INPUT")  
      for(i=0;i<o.length;i++)  
      if(o[i].type=="checkbox")   o[i].checked=isChecked  
      isChecked=!isChecked  
      }

  • 相关阅读:
    if、else if 、else及switch...case使用小记(C#)
    c#基础知识
    流与文本文件操作(C#)
    .NET中的异常处理机制(一)
    .NET中的异常处理机制(二)
    在引用类型变量上调用虚方法和非虚方法的区别
    各位客官!鼠标点击一个Button之后究竟发生了什么?您知道么?(C#)
    接口和抽象类的使用场景以及多类继承存在的问题(c#)
    面向对象SOLID设计原则之Open-Closed原则
    stack和stack frame
  • 原文地址:https://www.cnblogs.com/hqbird/p/1309636.html
Copyright © 2020-2023  润新知