`

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  
  }

本文出处,http://www.cnblogs.com/hqbird/archive/2008/10/13/1309636.html
分享到:
评论

相关推荐

    WPF CheckBox多选的应用

    本篇文章将详细探讨WPF中CheckBox多选的应用,以及如何实现这一功能。 首先,我们需要了解WPF中的CheckBox基本属性和事件。CheckBox的IsChecked属性表示其当前是否被选中,这是一个布尔类型的依赖属性。当选中时,...

    ListVIew 实现Checkbox多选

    本文将深入探讨如何在ListView中实现Checkbox多选功能,以及相关的Android编程技巧。 首先,我们需要创建一个自定义的ListView adapter。这个adapter将负责渲染每一项数据,并在每一项中包含一个Checkbox。在Java...

    angularjs实现的checkbox多选、全选、反选

    在本文中,我们将深入探讨如何使用AngularJS实现一个功能完备的复选框(checkbox)系统,包括多选、全选和反选功能。这个系统的一个关键特性是它完全基于AngularJS,无需依赖其他源数据,因此可以确保原始数据的完整...

    listview+checkbox 多选

    本篇文章将详细探讨如何在ListView中结合Checkbox实现多选功能。 ### 1. ListView的基本使用 首先,我们需要了解ListView的基础用法。在布局文件中声明ListView,并在Java代码中找到对应的View对象,然后通过...

    CheckBox多选功能的实现

    实现CheckBox多选功能的第一步是创建一个自定义的ListView布局文件。这个布局通常包含一个TextView用于显示文本信息,以及一个CheckBox用于选择。例如,你可以创建一个名为`list_item.xml`的布局文件: ```xml ...

    ExpandableListView+CheckBox多选功能

    在给定的“ExpandableListView+CheckBox多选功能”主题中,我们将探讨如何将这两个组件整合,创建一个既具有扩展性又支持多选操作的用户界面。 首先,我们需要理解`ExpandableListView`的基本工作原理。`...

    listview checkbox 多选反选取消

    "listview checkbox 多选反选取消"的标题描述了一个具体的实践案例,即在一个包含Checkbox的ListView中实现多选、反选以及取消选择的功能。下面我们将深入探讨这个知识点。 首先,我们需要创建一个自定义的ListView...

    radiobutton 控制checkbox多选(js实现)

    ### radiobutton 控制 checkbox 多选 (js 实现) 在 Web 开发中,表单是与用户交互的重要组成部分。为了实现更加灵活的功能,有时我们需要利用 JavaScript 来控制表单元素的状态,例如通过单选按钮(`...

    通过在GridView中CheckBox多选的批量删除,经典

    "通过在GridView中CheckBox多选的批量删除"就是一个典型的需求,它涉及到前端交互和后端处理两个主要方面。 前端交互主要是通过在GridView的每一行添加一个CheckBox,让用户可以勾选需要操作的数据项。这需要对...

    jS checkbox 多选

    本文将深入探讨如何使用JavaScript实现checkbox的多选功能,主要分为两种常见方法:iframe嵌套和利用cookies。 一、iframe下的多选方法 iframe,即内联框架,可以在一个HTML页面中嵌入另一个HTML页面。在处理多选...

    cash 表单提交checkbox 多选

    html checkbox cash 表单提交checkbox 多选

    checkbox多选

    checkbox多选

    layui.table表格渲染后判断checkbox多选控件是否可用

    该资源主要应用于layui框架下table表格渲染后判断checkbox多选控件是否可用,当然done下还可以做其他逻辑判定,附上源码,绝对可用。

    自制flash checkbox多选组件

    在本文中,我们将深入探讨如何制作一个自定义的Flash AS3多选组件,特别是基于给定的文件"自制flash checkbox多选组件"。这个组件允许用户在交互式应用程序中进行多选项选择,提供了灵活和可定制的功能。我们将讨论...

    Android Checkbox多选全选

    在很多场景下,比如设置界面、列表选择等,我们常常需要实现Checkbox的多选和全选功能,这使得用户能够方便地批量操作。本教程将详细讲解如何在Android应用中实现Checkbox的多选全选功能。 首先,我们需要了解...

    JQuery带checkbox多选的下拉列表

    JQuery带checkbox多选的下拉列表,功能非常强大,浏览器兼容性也很强, 浏览器兼容性如下: IE 7+ Chrome 8+ Firefox 10+ Safari 3+ Opera 10.6+ 调用非常强大,扩展性也很强

    安卓listview相关相关-listview实现checkbox多选效果可动态加载数据完美融合.rar

    以上是关于“安卓listview相关相关-listview实现checkbox多选效果可动态加载数据完美融合”的核心知识点,理解并掌握这些内容,将有助于你在实际开发中构建出功能完善的ListView组件。在实际应用中,你还需要结合...

    jquery checkbox 选中 取消 checkbox多选

    本文将深入探讨如何使用jQuery来实现复选框(checkbox)的选中和取消选中功能,以及如何处理多选的情况。 首先,我们需要理解HTML中的`&lt;input&gt;`元素类型为"checkbox"的基本用法。复选框用于让用户从多个选项中选择...

    用JavaScript实现CheckBox的多选和反选

    在网页中很多时候会用到CheckBoX的多选和反选.比如网上调查或是后台管理系统等。现在主流的方法是用JavaScript来实现CheckBOX的多选和反选,下面笔者就为大家介绍一下如何实现这样的网页效果

    Checkbox选定(支持多选)

    在网页设计和开发中,`Checkbox`是一种常用的交互元素,用于让用户进行多选操作,例如在后台管理系统中批量处理数据,或者在前端页面上让用户选择多个选项。本篇将深入探讨`Checkbox`的相关知识点,包括它的基本概念...

Global site tag (gtag.js) - Google Analytics