1、通过checkbox实现全选/全不选：
<!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> checkbox和按钮实现的多选框全选功能 </title>
<script type="text/javascript">
//说明：Javascript控制CheckBox的全选与取消全选
function checkAll(name)
{
var el = document.getElementsByTagName('input');
//取document中所有的input，比如文本输入框、按钮等元件，全都取出来存入数组，可以用el.length取数量，el[i]取内容
var len = el.length;
for(var i=0; i<len; i++)
{
if((el[i].type=="checkbox") && (el[i].name==name))
{
el[i].checked = true;
}
}
}
function clearAll(name)
{
var el = document.getElementsByTagName('input');
var len = el.length;
for(var i=0; i<len; i++)
{
if((el[i].type=="checkbox") && (el[i].name==name))
{
el[i].checked = false;
}
}
}
</script>
</head>
<body>
<form>
<input type="checkbox" name="test" value="" onclick="if(this.checked==true) { checkAll('test'); } else { clearAll('test'); }">字母全选开关
<input type="checkbox" name="test" value="a">a
<input type="checkbox" name="test" value="b">b
<input type="checkbox" name="test" value="c">c
<input type="checkbox" name="test" value="d">d
<input type="checkbox" name="test" value="e">e
<input type="checkbox" name="test" value="f">f
<input type="checkbox" name="test" value="g">g
<br>
<input type="checkbox" name="num" value="" onclick="if(this.checked==true) { checkAll('num'); } else { clearAll('num'); }">数字全选开关
<input type="checkbox" name="num" value="1">1
<input type="checkbox" name="num" value="2">2
<input type="checkbox" name="num" value="3">3
</form>
</body>
</html>
2、通过按钮实现全选/全不选：
<!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> checkbox和按钮实现的多选框全选功能 </title>
<script type="text/javascript">
//说明：Javascript控制CheckBox的全选与取消全选
function checkAll(name)
{
var el = document.getElementsByTagName('input');
var flag = true;
//取document中所有的input，比如文本输入框、按钮等元件，全都取出来存入数组，可以用el.length取数量，el[i]取内容
var len = el.length;
for(var i=0; i<len; i++)
{
if((el[i].type=="checkbox") && (el[i].name==name))
{
if(el[i].checked == true) {//判断第一个checkbox是否已经选中
flag = false;
} else {
flag = true;
}
break;
}
}
for(var i=0; i<len; i++) {
if((el[i].type=="checkbox") && (el[i].name==name))
{
el[i].checked = flag;
}
}
}
</script>
</head>
<body>
<form>
<input type="checkbox" name="test" value="a">a
<input type="checkbox" name="test" value="b">b
<input type="checkbox" name="test" value="c">c
<input type="checkbox" name="test" value="d">d
<input type="checkbox" name="test" value="e">e
<input type="checkbox" name="test" value="f">f
<input type="checkbox" name="test" value="g">g
<br>
<input type="checkbox" name="num" value="1">1
<input type="checkbox" name="num" value="2">2
<input type="checkbox" name="num" value="3">3
<br>
<input type="button" value="选择/清空所有的字母" onclick="checkAll('test')">
<br>
<input type="button" value="选择/清空所有的数字" onclick="checkAll('num')">
</form>
</body>
</html>
3、表格全选/全不选
<!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>
<style type="text/css">
.ct{
text-align:center;
}
</style>
<script type="text/javascript">
function allCheck(){
var obj=document.getElementsByTagName("input");
if(document.getElementById("all").checked==true){
for(var i=0;i<obj.length;i++){
obj[i].checked=true;
}
}else{
for(var i=0;i<obj.length;i++){
obj[i].checked=false;
}
}
}
function checkT_F(){
var obj=document.getElementsByTagName("input");
var j=0;
for(var i=0;i<obj.length;i++){
if(obj[i].id!='all'){ //如果是复选框
if(obj[i].checked==true){ //并且为选中
j++;
}
}
}
if(j==(obj.length-1)){ //如果复选框选中的数量等于（复选框总和减去全选这个选框的数量）
document.getElementById("all").checked=true; //全选被激活
}else{
document.getElementById("all").checked=false; //取消全选
}
}
</script>
</head>
<body>
<table width="500" border="1" cellspacing="0" cellpadding="0" class="ct" onclick="javascript:checkT_F()">
<tr>
<td><input type="checkbox" id="all" name="allCK" onclick="javascript:allCheck()"/>全选</td>
<td>产品名称</td>
<td>价格(元)</td>
<td>数量</td>
</tr>
<tr>
<td><input type="checkbox" id="1" /></td>
<td>诺基亚N85手机</td>
<td>2589</td>
<td>6</td>
</tr>
<tr>
<td><input type="checkbox" id="2" /></td>
<td>佳能数码相机</td>
<td>1850</td>
<td>5</td>
</tr>
<tr>
<td><input type="checkbox" id="3" /></td>
<td>戴尔键盘</td>
<td>1834</td>
<td>4</td>
</tr>
<tr>
<td><input type="checkbox" id="4" /></td>
<td>华为手机</td>
<td>3432</td>
<td>3</td>
</tr>
<tr>
<td><input type="checkbox" id="5" /></td>
<td>iphone</td>
<td>4000</td>
<td>20000</td>
</tr>
<tr>
<td><input type="checkbox" id="6" /></td>
<td>华硕笔记本</td>
<td>6988</td>
<td>5</td>
</tr>
<tr align="left">
<td colspan="4"> 删除选中的产品</td>
</tr>
</table>
</body>
</html>
相关推荐
### JavaScript 实现复选框全选/取消功能 在网页开发中，经常需要用到复选框全选或取消的功能。本文将详细介绍如何通过JavaScript实现这一功能，并解析提供的代码片段。 #### 1. 功能概述 本功能的目标是实现一个...
在标题"jQuery实现复选框全选/反选demo源码"中，我们关注的核心知识点是利用jQuery实现复选框的全选和反选功能。这个功能在许多网页应用中都非常实用，比如在表格数据筛选、表单多选等场景。通过简单的jQuery代码，...
总之，“js控制复选框全选、全不选”是JavaScript基础应用的一个实例，通过理解和实践这样的功能，开发者可以更好地掌握DOM操作和事件处理。`checked.html`文件是一个很好的学习资源，可以帮助我们直观地了解这一...
本资源"复选框全选、全不选和反选的效果实现.rar"聚焦于JavaScript（JS）实现复选框的全选、全不选和反选功能，这对于创建交互性强、用户体验良好的网页表单至关重要。全选、全不选和反选功能使得用户可以便捷地管理...
本文将深入探讨“复选框全选全不选JS代码”的实现原理、应用场景以及如何优化这段代码，以便开发者能够更好地理解和运用到实际项目中。 ### 复选框全选与全不选的概念 复选框（Checkbox）是Web表单中常见的元素，...
<title>jQuery 复选框全选全不选示例</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <input type="checkbox" id="selectAll"> 全选 <input type="checkbox" ...
### Vue+Vant-UI框架实现购物车复选框全选和反选功能 #### 1. 概述 在电商类应用中，购物车模块是用户进行商品选购时的重要组成部分。其中，复选框全选和反选功能可以帮助用户快速选择或取消选择购物车中的全部商品...
通过以上代码，我们就实现了`QTableWidget`的表头复选框全选功能。对于`QTableView`，可以使用`QStandardItemModel`和`QStandardItem`代替`QTableWidgetItem`，原理相同。 这个过程涉及到的知识点包括： - PyQt5的...
在网页交互设计中，checkbox复选框全选/全不选功能是一个常见的需求，它能够帮助用户快速选择或取消选择一组选项。这篇文章主要探讨了如何使用JavaScript和jQuery这两种流行的前端技术来实现这一功能。 首先，我们...
在网页交互设计中，复选框...综上所述，通过JavaScript实现复选框全选全不选以及子复选框带动全选框的选中功能，主要涉及事件监听、DOM操作和状态同步。这种交互设计能提高用户操作的便捷性，提升网页应用的用户体验。
以上就是使用jQuery实现复选框全选和反选的基本步骤。在实际项目中，你可能还需要考虑一些边缘情况，例如当子复选框动态添加或删除时，全选状态的更新等。这个小示例提供了一个基础框架，开发者可以根据具体需求进行...
在本教程中，我们将探讨如何利用C#实现复选框来控制DataGridView的数据全选、反选以及全不选，并在选中复选框后改变行的颜色。这将涉及到事件处理、数据绑定、自定义样式等多个方面。 首先，我们需要创建一个包含复...
首先，我们需要在HTML中设置复选框和全选/全不选按钮。例如： ```html <input type="checkbox" name="item" value="1"> Option 1 <input type="checkbox" name="item" value="2"> Option 2 ...
在这个特定的案例中，我们关注的是如何使用Element UI来实现一个带有复选框（checkbox）的下拉框（select），并且支持全选和取消全选的功能。下面将详细介绍这一功能的实现步骤和关键知识点。 首先，我们需要在项目...
1. 添加一个复选框控件，作为全选/取消全选的开关。 2. 绑定复选框的`CheckedChanged`事件。 3. 在事件处理程序中，如果复选框被选中，调用`dataGridView.SelectAll()`；反之，调用`dataGridView.ClearSelection()`...
在IT领域，尤其是在前端开发中，复选框全选和反选是一个常见的功能需求，它通常出现在表格或者列表中，允许用户一次性选择或取消选择所有项目。这个"复选框全选和反选.zip"文件可能包含了一个JavaScript实现的解决...
总之，通过上述分析，我们可以看到复选框的单选、多选及全选功能是通过精心设计的HTML结构、JavaScript事件处理以及数据维护逻辑来实现的，这对于理解和实现复杂的表单控件具有重要的参考价值。
总结，Bootstrap中的select复选框是一个强大的工具，结合全选功能和索引，能够创建高效且用户友好的多选界面。通过合理的HTML结构、CSS样式和JavaScript交互，我们可以进一步提升用户体验，使其成为网页交互中的亮点...
在实现复选框全选功能时，我们可以创建一个复选框，它的勾选状态将决定其他所有复选框的状态。例如，我们可以设置一个ID为"selectAll"的复选框，并绑定"click"事件，当用户点击这个复选框时，触发相应的函数，将所有...
我学的java，在一次开发HTML前端时涉及到了数据动态遍历和全选/反全选按钮的实现，试了很多input全选框的实现，很多都只能点击两次，现在分享一下解决方案！