<html>
<head>
<script type="text/javascript">
function checkEvent(name, allCheckId) {
var allCk = document.getElementById(allCheckId);
if (allCk.checked == true) checkAll(name);
else checkAllNo(name);
}
//全选
function checkAll(name) {
var names = document.getElementsByName(name);
var len = names.length;
if (len > 0) {
var i = 0;
for (i = 0; i < len; i++)
names[i].checked = true;
}
}
//全不选
function checkAllNo(name) {
var names = document.getElementsByName(name);
var len = names.length;
if (len > 0) {
var i = 0;
for (i = 0; i < len; i++)
names[i].checked = false;
}
}
//反选
function reserveCheck(name) {
var names = document.getElementsByName(name);
var len = names.length;
if (len > 0) {
var i = 0;
for (i = 0; i < len; i++) {
if (names[i].checked) names[i].checked = false;
else names[i].checked = true;
}
}
}
</script>
</head>
<body>
<input type="checkbox" id="ckall" onclick="checkEvent('ck','ckall')" />
全选
<input type="checkbox" id="ckReserve" onclick="reserveCheck('ck','ckReserve')"
/>
反选
<br />
<input type="checkbox" name="ck" value="1" />
篮球
<br />
<input type="checkbox" name="ck" value="2" />
旅游
<br />
<input type="checkbox" name="ck" value="3" />
读书
<br />
<input type="checkbox" name="ck" value="4" />
美食
<br />
<input type="checkbox" name="ck" value="5" />
睡觉
</body>
</html>
分享到：
相关推荐
JS实现全选反选全不选
在JavaScript编程中，"全选反选"功能是常见的用户交互设计，常见于表格或列表数据的批量操作中。这个功能允许用户一键选择或取消选择所有项目，极大地提高了操作效率。下面将详细介绍如何使用JavaScript来实现这个...
用js书写全选反选的事例，简单明了，源代码，方便易学，可直接引用
总的来说，"JS简单表格列表全选反选代码"是JavaScript基础应用的一个实例，涉及到事件处理、DOM操作、遍历和逻辑判断等多个核心概念，对于初学者和有一定经验的开发者来说，都是一个很好的学习和参考素材。
本话题将深入探讨“jQuery全选反选插件”的相关知识点，这对于构建具有复选框全选和反选功能的用户界面非常有用。 首先，jQuery全选反选插件的核心功能是实现复选框的批量选择。在网页上，当用户需要对一组选项进行...
jQuery表格行全选反选单选代码，例子采用bootstrap格式，可以选择自定义。
"jquery全选反选全不选案例" 是一个常见的交互功能，常见于表格或者列表中，允许用户一键选择或取消所有选项。这个功能在数据筛选、批量操作等场景下非常实用。 实现这一功能的关键在于理解 jQuery 中的选择器和...
JS JS实现全选反选 全选 反选
js 全选反选取消, ASP.NET中url传递中文的解决方案, C#中使用反射显示程序集的所有类型和属性, js怎么取表格中的某一行的值, SQL Server 查询分析器快捷键集合, URLRewrite能够对URL进行重写,失败的原因
接下来，我们引入jQuery库，并创建一个名为`select.js`的JavaScript文件，来处理全选/反选的逻辑： ```javascript $(document).ready(function() { // 当全选按钮被点击时，触发事件 $('#selectAll').click...
### JS全选反选父项子项联动多选框知识点详解 #### 一、知识点概述 在前端开发中，我们经常遇到需要实现全选/反选功能的需求，尤其是在表格或列表选择场景中。本文将详细介绍一种实现“父项选中时，子项随父项选中...
js全选、反选、取消选择 有代码，很简单！一看就懂
在JavaScript编程中，全选和反选功能是常见的交互元素，尤其在表格或者多选列表中，用户往往希望一键选择或取消所有选项。本话题将深入探讨如何利用JavaScript实现这样的功能，以提升用户体验。 首先，我们需要理解...
接下来，我们使用JavaScript（通常配合jQuery库，但也可以使用原生JS）来实现全选/反选功能。这里我们使用jQuery： ```javascript $(document).ready(function() { $('#selectAll').click(function() { if ($...
本篇文章将详细讲解如何利用JavaScript实现`checkbox`的全选、反选和取消全部功能，以及相关的代码示例。 ### 1. `checkbox`基本概念 `checkbox`在HTML中通过`<input type="checkbox">`标签创建。默认情况下，`...
在JavaScript编程中，全选、反选和删除选择等功能是网页交互中常见且重要的操作，尤其是在数据表或者多选项列表中。这些功能可以极大地提升用户体验，使得用户能够快速地进行批量操作。以下是对这些概念的详细说明：...
以下是三种实现Checkbox全选和反选的方法，以及它们的JavaScript和Java实现细节。 ### 方法一：使用`checked`属性 **JavaScript实现**： 在JavaScript中，可以通过获取全选按钮的`checked`属性来控制所有复选框的...
02-全选反选-js.html