`
twentygjh
  • 浏览: 15981 次
  • 性别: Icon_minigender_1
  • 来自: 常德
文章分类
社区版块
存档分类
最新评论

js 全选和反选

阅读更多

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  <title>Untitled Document</title>
 </head>
 <script>
  //全选
  function selectAll(){
   //首先判断checkbox是否选中
   var checkbox = document.getElementById("checkbox");
   var checkbox1 = document.getElementsByName("checkbox1");
   //如果checkbox选中,checkbox1数组选中
   //如果checkbox不选中,checkbox1数组不选中
   if(checkbox.checked == true){
    for(var i=0; i<checkbox1.length; i++){
     checkbox1[i].checked = true;
    }
   }else{
    for(var i=0; i<checkbox1.length; i++){
     checkbox1[i].checked = false;
    }
   }
  }
  //反选
  function selectOpposite(){
   //首先判断checkbox是否选中
   var checkbox = document.getElementById("checkbox");
   var checkbox1 = document.getElementsByName("checkbox1");
   for(var i=0; i<checkbox1.length; i++){
    checkbox1[i].checked = !checkbox1[i].checked;
   }
  }
 </script>
 <body>
  <table border="1">
   <tr>
    <td>
     全选<input type="checkbox" id="checkbox" name="checkbox" value="0" >
     反选<input type="checkbox" id="checkbox" name="checkbox" value="0" >
    </td>
    <td>
     请写入
    </td>
   </tr>
   <tr>
    <td>
     <input type="checkbox" id="checkbox1" name="checkbox1" value="0">
    </td>
    <td>
     <input type="text" id="txt1" name="txt1" value="">
    </td>
   </tr>
   <tr>
    <td>
     <input type="checkbox" id="checkbox1" name="checkbox1" value="1">
    </td>
    <td>
     <input type="text" id="txt2" name="txt2" value="">
    </td>
   </tr>
   <tr>
    <td>
     <input type="checkbox" id="checkbox1" name="checkbox1" value="2">
    </td>
    <td>
     <input type="text" id="txt3" name="txt3" value="">
    </td>
   </tr>
  </table>
 </body>
</html>

分享到:
评论

相关推荐

    js实现全选和反选功能

    在JavaScript中,全选和反选功能通常应用于包含多个复选框(checkbox)的表单中。用户可以通过点击一个主复选框来选择或取消选择所有其他复选框。这个功能在网页表格、数据筛选等场景中非常常见,极大地提高了用户...

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

    例如,React中有许多第三方库如`react-checkbox-tree`、`antd`的Tree组件等,它们内置了全选、反选和级联选择的功能。 总结来说,带复选框的多级目录树是一种高效的数据组织和操作方式,结合全选和反选功能,能极大...

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

    全选和反选功能则是复选框常用的一种交互模式,极大地提升了用户体验,特别是当选项数量较大时。本文将深入探讨复选框的全选和反选机制及其在IT中的应用。 全选功能是指用户只需点击一个按钮或复选框,就能同时选中...

    checkbox实现全选和反选经典例子

    在高级控件如DataGridView中,通过结合Checkbox可以实现全选和反选功能,为用户提供便捷的操作方式。这个经典例子将深入探讨如何在Web应用中实现这一功能。 1. **Checkbox基本概念** Checkbox是HTML中的一个表单...

    JS实现全选、反选

    JS JS实现全选反选 全选 反选

    Jquery实现全选和反选功能

    本教程将深入探讨如何使用jQuery实现全选和反选功能,这在多选列表或表格中非常常见,例如在批量处理数据时。 全选和反选功能的核心在于同步用户界面中的复选框状态。当用户点击一个主复选框(通常标记为“全选”)...

    js全选、反选、取消选择

    js全选、反选、取消选择 有代码,很简单!一看就懂

    JS实现checkbox的全选和反选

    资源名称:JS实现checkbox的全选和反选资源截图: 资源太大,传百度网盘了,链接在附件中,有需要的同学自取。

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

    通过Vue.js和Vant-UI组合,我们可以有效地实现购物车的全选与反选功能。这样的实现提高了用户界面的交互性和用户体验。在实际应用中,除了全选与反选之外,还可以进一步扩展更多功能,例如批量删除、价格计算、库存...

    三种方式实现checkbox全选,反选

    以下是三种实现Checkbox全选和反选的方法,以及它们的JavaScript和Java实现细节。 ### 方法一:使用`checked`属性 **JavaScript实现**: 在JavaScript中,可以通过获取全选按钮的`checked`属性来控制所有复选框的...

    JavaScript全选和反选

    &lt;script language=javascript&gt; function checkAll(boolvalue){ var items=document.getElementsByTagName("input"); for(i=0;i;i++){ if(items[i].type=="checkbox"){ items[i].checked=boolvalue; } } } ...

    js 全选/反选/删除选择等代码 (精华)

    在JavaScript编程中,全选、反选和删除选择等功能是网页交互中常见且重要的操作,尤其是在数据表或者多选项列表中。这些功能可以极大地提升用户体验,使得用户能够快速地进行批量操作。以下是对这些概念的详细说明:...

    简单js实现全选全部选反选效果

    在JavaScript编程中,全选和反选功能是常见的交互元素,尤其在表格或者多选列表中,用户往往希望一键选择或取消所有选项。本话题将深入探讨如何利用JavaScript实现这样的功能,以提升用户体验。 首先,我们需要理解...

    简单的JAVASCRIPT全选/反选

    在JavaScript编程中,全选和反选功能是常见的交互操作,尤其在网页表格或列表中。这个主题涉及到了DOM操作、事件处理以及数组方法。下面将详细解释如何使用JavaScript实现全选和反选功能。 首先,我们需要理解...

    Javascript实现全选反选

    在JavaScript编程中,"全选反选"功能是常见的用户交互设计,常见于表格或列表数据的批量操作中。这个功能允许用户一键选择或取消选择所有项目,极大地提高了操作效率。下面将详细介绍如何使用JavaScript来实现这个...

    vue2.0在table中实现全选和反选的示例代码

    在 `home.vue` 文件中,我们可以看到使用 JavaScript 实现全选和反选的逻辑,并使用 `v-on` 指令来绑定事件。 本示例代码展示了 Vue 2.0 中实现 Table 全选和反选的示例代码,并介绍了相关的知识点,包括使用 Vue ...

    JQ 全选和反选和取消

    标题“JQ全选和反选和取消”涉及的是jQuery中处理多选元素,如复选框或表格行的选择状态。在这个主题下,我们将深入探讨如何实现全选、反选以及取消选择的功能,并结合给出的`demo.html`文件进行实例分析。 1. **...

    jquery实现全选和反选小功能

    很好用的使用jquery来实现的通用的全选反选功能

    js实现全选和反选

    通过js代码,实现表单元素的全选和反选的简单的例子

    js全选/反选

    在本话题中,我们将深入探讨如何使用JavaScript实现全选和反选的功能。 一、全选功能 全选功能通常通过一个复选框(checkbox)触发,当用户点击这个复选框时,所有的子项(其他复选框)都会被自动选中。以下是一个...

Global site tag (gtag.js) - Google Analytics