<div class="right_nk_box"> <div class="right_bg_box"> <div><h2>JS 全选 反选及 判断是否是全选或全不选</h2></div> <table width="100%" cellspacing="1" border="0" bgcolor="#d8dcdf" id="main_tab"> <tbody> <tr class="biaoge_td1"> <td width="5%" class="biaoge_td3"><input type="checkbox" id="checkbox_main" name="checkbox_main" onclick="checkAll();"> <span>(全选/反选)</span></td> </tr> <tr class="biaoge_td2"> <td bgcolor="#FFFFFF"><input type="checkbox" id="ck_1" name="checkbox" onclick="unCheckAll();"></td> </tr> <tr class="biaoge_td2"> <td bgcolor="#FFFFFF"><input type="checkbox" id="ck_1" name="checkbox" onclick="unCheckAll();"></td> </tr> <tr class="biaoge_td2"> <td bgcolor="#FFFFFF"><input type="checkbox" id="ck_1" name="checkbox" onclick="unCheckAll();"></td> </tr> <tr class="biaoge_td2"> <td bgcolor="#FFFFFF"><input type="checkbox" id="ck_1" name="checkbox" onclick="unCheckAll();"></td> </tr> <tr class="biaoge_td2"> <td bgcolor="#FFFFFF"><input type="checkbox" id="ck_1" name="checkbox" onclick="unCheckAll();"></td> </tr> <tr class="biaoge_td2"> <td bgcolor="#FFFFFF"><input type="checkbox" id="ck_1" name="checkbox" onclick="unCheckAll();"></td> </tr> </tbody> </table> </div> </div>
JS代码
/** * 全选/反选 */ function checkAll(){ var checkMain = document.getElementById("checkbox_main"); var code_Values = document.getElementsByName("checkbox"); if(checkMain.checked){ for(i = 0;i < code_Values.length;i++){ if(code_Values[i].type == "checkbox"){ code_Values[i].checked = true; } } }else{ for(j = 0;j < code_Values.length;j++){ if(code_Values[j].type == "checkbox"){ code_Values[j].checked = false; } } } } function unCheckAll(){ var checkMain = document.getElementById("checkbox_main"); if(isAllCheckTrue()){ checkMain.checked = true; } else{ checkMain.checked = false; } } /* * 判断是否全选的方法 */ function isAllCheckTrue(){ var code_Values = document.getElementsByName("checkbox"); for(i = 0;i < code_Values.length;i++){ if(!code_Values[i].checked){ return false; } } return true; } /* * 判断是否全不选的方法 */ function isAllCheckFalse(){ var code_Values = document.getElementsByName("checkbox"); for(i = 0;i < code_Values.length;i++){ if(code_Values[i].checked){ return false; } } return true; }
相关推荐
JS实现全选反选全不选
"jquery全选反选全不选案例" 是一个常见的交互功能,常见于表格或者列表中,允许用户一键选择或取消所有选项。这个功能在数据筛选、批量操作等场景下非常实用。 实现这一功能的关键在于理解 jQuery 中的选择器和...
在JavaScript编程中,"全选反选"功能是常见的用户交互设计,常见于表格或列表数据的批量操作中。这个功能允许用户一键选择或取消选择所有项目,极大地提高了操作效率。下面将详细介绍如何使用JavaScript来实现这个...
在JavaScript编程中,全选和反选功能是常见的交互元素,尤其在表格或者多选列表中,用户往往希望一键选择或取消所有选项。本话题将深入探讨如何利用JavaScript实现这样的功能,以提升用户体验。 首先,我们需要理解...
总的来说,"JS简单表格列表全选反选代码"是JavaScript基础应用的一个实例,涉及到事件处理、DOM操作、遍历和逻辑判断等多个核心概念,对于初学者和有一定经验的开发者来说,都是一个很好的学习和参考素材。
JS JS实现全选反选 全选 反选
用js书写全选反选的事例,简单明了,源代码,方便易学,可直接引用
本话题将深入探讨“jQuery全选反选插件”的相关知识点,这对于构建具有复选框全选和反选功能的用户界面非常有用。 首先,jQuery全选反选插件的核心功能是实现复选框的批量选择。在网页上,当用户需要对一组选项进行...
接下来,我们使用JavaScript(通常配合jQuery库,但也可以使用原生JS)来实现全选/反选功能。这里我们使用jQuery: ```javascript $(document).ready(function() { $('#selectAll').click(function() { if ($...
在网页开发中,全选和反选功能是常见的交互元素,尤其在表格或者多选项列表中,用户可能希望一键选择所有项目或清除已选。在这个案例中,我们将探讨如何使用HTML和jQuery来实现这一功能。 首先,我们需要创建HTML...
jQuery表格行全选反选单选代码,例子采用bootstrap格式,可以选择自定义。
对于“全选”、“全不选”和“反选”功能,jQuery 提供了简洁的解决方案,同时也可以方便地获取选中的元素值。以下我们将详细探讨如何使用 jQuery 实现这些功能。 1. **全选**: 全选功能通常应用于具有多选选项的...
3. **动态添加复选框**:允许用户动态添加新的复选框,并确保新添加的复选框也能被全选或全不选的功能所控制。 #### 六、总结 通过上述分析和讲解,我们已经详细了解了如何使用JavaScript实现多选框的全选与反选...
本篇文章将详细讲解如何利用JavaScript实现`checkbox`的全选、反选和取消全部功能,以及相关的代码示例。 ### 1. `checkbox`基本概念 `checkbox`在HTML中通过`<input type="checkbox">`标签创建。默认情况下,`...
- `全选反选_按钮.js`这个文件很可能包含了实现这些功能的JS代码。通常,它会包含上述逻辑的函数定义,以及在页面加载完成后绑定事件监听器的代码。 - 例如,可能会有像`selectAll()`、`unselectAll()`和`check...
### JS全选反选父项子项联动多选框知识点详解 #### 一、知识点概述 在前端开发中,我们经常遇到需要实现全选/反选功能的需求,尤其是在表格或列表选择场景中。本文将详细介绍一种实现“父项选中时,子项随父项选中...
这种方法利用事件委托,监听父元素的`click`事件,然后根据点击的目标元素是否是全选按钮来执行全选或反选操作。 ```javascript document.getElementById('parentContainer').addEventListener('click', (event) =>...
js全选、反选、取消选择 有代码,很简单!一看就懂