`
___loveOfForever
  • 浏览: 77866 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

全选,点击链接全选,选中多选框全选以及反选,全不选

阅读更多
<html>
<head>
<title>JSP for UserForm form</title>
head>
<script type="text/javascript">
   var checkboxs=document.getElementsByName("deptno");
   function SelectAll(){
      document.getElementById("BakchkAll").checked = true;
      document.getElementById("chkAll").checked=false;
      document.getElementById("NochkAll").checked=false;
      for (var i=0;i<checkboxs.length;i++) {
         var chk=checkboxs[i];
         chk.checked=!chk.checked;
      }
   }
   function SelectAlls(){
      document.getElementById("chkAll").checked=true;
      document.getElementById("BakchkAll").checked=false;
      document.getElementById("NochkAll").checked=false;
      for (var i=0;i<checkboxs.length;i++) {
         checkboxs[i].checked = true;
      }
   }
   function NoSelectAll(){
       document.getElementById("chkAll").checked=false;
       document.getElementById("BakchkAll").checked =false;
       document.getElementById("NochkAll").checked=true;
       for (var i=0;i<checkboxs.length;i++) {
         checkboxs[i].checked = false;
       }
   }
   function chAll(){
     var objCheckAll = document.getElementById("chkAll");
     document.getElementById("NochkAll").checked=false;
     document.getElementById("BakchkAll").checked=false;
     if(objCheckAll.checked==true){
       SelectAlls();
     }
   }
   function NochAll(){
     var objCheckAll = document.getElementById("NochkAll");
     if(objCheckAll.checked==true){
       NoSelectAll();
     }
   }
   function BakchAll(){
    var objCheckAll = document.getElementById("BakchkAll");
    if(objCheckAll.checked==true){
      SelectAll();
      document.getElementById("NochkAll").checked=false;
      document.getElementById("chkAll").checked=false;
    }
   }
</script>
<body>
<form name="areaForm" id="areaForm" method="post" action="/Submit.do">

<table width="80%" cellspacing="1" cellpadding="3" align="center">   <tr>
   <td class="infoColumnName">地点<font color='red'>**</font></td>
      <td class="infoColumnValue">
      <table>
      <tr>
                       <td><input type="checkbox" id="chkAll" onclick="javascript:chAll()"/>
                         全选     
                         <input type="checkbox" id="NochkAll" onclick="javascript:NochAll()"/>
                         全不选     
                         <input type="checkbox" id="BakchkAll" onclick="javascript:BakchAll()"/>
                         反选
                       </td>
                    </tr>
         <tr>
         <td width="50%">
  
    <input type="checkbox" id="deptno" name="deptno" value="5301">    南京                           
  
    <input type="checkbox" id="deptno" name="deptno" value="5302">    无锡                            
  
   <br/>
  
    <input type="checkbox" id="deptno" name="deptno" value="5303">    深圳                            
  
    <input type="checkbox" id="deptno" name="deptno" value="5304">    南昌                             
  
   <br/>
  
    <input type="checkbox" id="deptno" name="deptno" value="5305">    苏州                            
  
    <input type="checkbox" id="deptno" name="deptno" value="5306">    北京                            
  
   <br/>
  
    <input type="checkbox" id="deptno" name="deptno" value="5308">    广州                            
  
    <input type="checkbox" id="deptno" name="deptno" value="5309">    扬州                             
  
   <br/>
  
    <input type="checkbox" id="deptno" name="deptno" value="5310">    海南                            
  
    <input type="checkbox" id="deptno" name="deptno" value="5311">    镇江                           
  
   <br/>
  
    <input type="checkbox" id="deptno" name="deptno" value="5312">    泰州                            
  
          </td>
          </tr>
      </table>
       </td>
   </tr>
   <tr>
   <td colspan="4" class="infoTitle" align="center">
   <input type="button" name="Submit" value="提交" onClick=check();>
   <input type="reset" value="重置">   </td>
   </tr>
</table>
</form>
</body>
</html>

0
4
分享到:
评论

相关推荐

    Axure RP 复选框全选、反选

    用Axure RP 8.0做的原型设计列子,作用是复选框做全选和非全选,已选的做反选。可以学习下反选或非反选的交互思路。

    多选框全选反选

    ### 多选框全选与反选功能实现 在网页开发中,经常需要用到表单来收集用户的选择。其中,多选框(复选框)是一种常见的控件类型,用于允许用户选择一个或多个选项。本篇文章将详细介绍如何利用JavaScript实现多选框...

    jquery全选反选全不选案例

    为了实现全不选,只需要在用户点击 "全选" 复选框时,将其状态设置为未选中即可。 这个案例展示了 jQuery 如何通过事件监听和 DOM 操作来增强用户体验。在实际项目中,你可能还需要考虑异步加载的数据、动态添加的...

    C#复选框实现全选反选和全不选

    在本教程中,我们将探讨如何利用C#实现复选框来控制DataGridView的数据全选、反选以及全不选,并在选中复选框后改变行的颜色。这将涉及到事件处理、数据绑定、自定义样式等多个方面。 首先,我们需要创建一个包含复...

    JQuery实现全选、全不选、反选功能

    JQuery实现全选、全不选、反选功能 ...3、点点击'全不选'按钮时,当前页面的所有复选框置为非选中状态。 4、当点击'反选'按钮时,当前页面选中状态的复选框置为未选中状态,未选中状态的复选框置为选中状态。

    实现table表格checkbox复选框的全选 反选

    // 当行内复选框被点击时,检查是否所有复选框都被选中,如果都选中,则全选复选框也被选中 $('.itemCheckbox').click(function() { var allChecked = $('.itemCheckbox').length === $('.itemCheckbox:checked')...

    jquery 实现全选,全不选,反选,获取选中的值

    综上所述,使用 jQuery 实现全选、全不选、反选以及获取选中值的功能是相当直观和简单的。通过绑定事件处理器,我们可以轻松地响应用户的交互,动态地更新页面状态。结合 HTML 结构和适当的 CSS 样式,可以创建出...

    vue+vant-UI框架实现购物车的复选框全选和反选功能

    ### Vue+Vant-UI框架实现购物车复选框全选和反选功能 #### 1. 概述 在电商类应用中,购物车模块是用户进行商品选购时的重要组成部分。其中,复选框全选和反选功能可以帮助用户快速选择或取消选择购物车中的全部商品...

    JS全选反选父项子项联动多选框

    子项全选中时,父项也选中,子项有一项不选时,父项即不选中”的机制,即父子项联动的多选框全选与反选功能。 #### 二、核心概念解释 1. **全选**: 当父级选项被选中时,其下所有子级选项也会被自动选中。 2. **...

    javaScript实复选框的全选,全不选,反选

    javaScript入门案例之复选框全选,全不选,反选

    复选框的全选和反选、复选框的全选和反选

    全选功能是指用户只需点击一个按钮或复选框,就能同时选中所有相关的复选框。这通常用在数据列表、表格或文件选择场景中。实现这一功能的关键在于正确地绑定和处理事件。在前端开发中,我们通常使用JavaScript或者...

    复选框全选、全不选和反选的效果实现.rar

    本资源"复选框全选、全不选和反选的效果实现.rar"聚焦于JavaScript(JS)实现复选框的全选、全不选和反选功能,这对于创建交互性强、用户体验良好的网页表单至关重要。全选、全不选和反选功能使得用户可以便捷地管理...

    微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能

    1.点击全选选中所有商品,再点击全选,取消勾选 2.在选中的同时获取需要的商品id,获取后是以字符串拼接的形式 拼成一个字符串 3.点击删除按钮时删除选中的商品 点击全选 再次点击全选框 wxml关键代码 重要代码 ...

    JS实现全选反选全不选

    JS实现全选反选全不选

    带复选框的多级目录树,复选框的选择控制子节点父节点 全选和反选

    下面将详细讲解这个主题,包括复选框、多级目录树以及全选和反选的实现原理。 1. **复选框(Checkbox)**: 复选框是用户界面中常用的一种控件,它允许用户在多个选项中进行多选。在HTML中,`...

    jquery 、js实现复选框 (全选、反选)

    接下来实现反选功能,即当用户点击反选按钮后,所有已选中的复选框将变为未选中状态,而未选中的复选框则变为选中状态。 ```javascript // 反选 function checkAllFalse() { $(":checkbox").each(function() { $...

    Js/Jquery 实现checkbox全选,反选,全不选

    本文将详细讲解如何通过JS和jQuery实现checkbox的全选、反选以及全不选功能。 首先,我们需要理解HTML中的复选框元素`&lt;input type="checkbox"&gt;`,它允许用户在一组选项中进行多选。为了实现全选、反选和全不选的...

    全选 全不选

    选中全选复选框 所有的复选框都选上,如果取消全选,所有的复选框都取消勾选,如果选中一个复选框,那么全选复选框就也勾选上,当所有的复选框取消选择,全选复选框也取消选中状态...

    jQuery实现复选框checkbox全选、反选功能.rar

    这里的`this.checked`会根据全选复选框的状态(被选中或未选中)来设置所有其他复选框的`checked`属性。 反选功能的jQuery代码则稍微不同: ```javascript $("#selectAll").click(function() { $('input[name=...

    QTableWidget表头添加复选框实现全选功能

    在槽函数`onHeaderClicked()`中,我们需要根据点击的表头索引更新全选/全不选状态,并遍历所有的行来同步选中状态。 ```cpp void MainWindow::onHeaderClicked(int logicalIndex) { bool isChecked = tableWidget-...

Global site tag (gtag.js) - Google Analytics