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

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

    博客分类：
  • js
J#CC++C#HTML 
阅读更多 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>网页复选框全选、全不选和反选的效果实现</title>

<SCRIPT LANGUAGE="JavaScript">
//<!-- Begin
///全选
function checkAll() {
for (var j = 1; j <= 2; j++) 
{
var a="c"+j;
box = document.getElementsByName(a);
if(!box[0].checked)
{
	 box[0].checked = true;   
}
}
}

///全不选
function uncheckAll() {
for (var j = 1; j <= 2; j++) {
var a="c"+j;
box = document.getElementsByName(a);
 box[0].checked = false;  
}
}

///反选
function switchAll() {
for (var j = 1; j <= 2; j++) 
{
var a="c"+j;
box = document.getElementsByName(a);
 box[0].checked = !box[0].checked;   
}
}

//  End -->
</script>


</head>

<body>

<form name=checkboxform>

<input type=checkbox name=C1 checked>C1<br>

<input type=checkbox name=C2 checked>C2<br>



<br><input type=button value="全部选中" onClick="checkAll()">

<br><input type=button value="全部不选" onClick="uncheckAll()">

<br><input type=button value="选择转换" onClick="switchAll()">

<br>

</form>

</body>

</html>
分享到：
| 左边select内容选择到右边select内容里面的 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

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

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

    Axure RP 复选框全选、反选

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

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

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

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

    本示例中，我们关注的是如何使用jQuery来实现复选框（checkbox）的全选和反选功能，这对于构建具有交互性的表单或者需要用户进行多选操作的界面是非常实用的。 在HTML中，复选框通常由`&lt;input&gt;`标签定义，类型为...

    spreadjs_列头添加复选框全选功能-demo.zip

    《SpreadJS：实现列头复选框全选功能详解》 SpreadJS 是一款强大的JavaScript电子表格库，由 GrapeCity 公司开发，它允许开发者在Web应用中创建、编辑和展示电子表格数据。在实际应用中，我们经常需要在列头添加复...

    axure复选框全选反选效果.rp

    axure复选框全选反选效果.rp

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

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

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

    JQuery实现全选、全不选、反选功能 1、当点击'全选'按钮时，页面中所有的复选框都应该为选中状态， 1.1、当再次点击'全选'按钮时，所有的复选框应该是非选中状态。 1.2、当点击子复选框时，'全选'按钮应该是非选中...

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

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

    javascript 实现复选框全选/取消功能

    ### JavaScript 实现复选框全选/取消功能 在网页开发中，经常需要用到复选框全选或取消的功能。本文将详细介绍如何通过JavaScript实现这一功能，并解析提供的代码片段。 #### 1. 功能概述 本功能的目标是实现一个...

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

    与全选相反，全不选功能用于取消所有子复选框的选择。这可以通过设置 `checked` 属性为 `false` 来实现。我们可以修改上面的全选事件处理函数，添加一个条件判断，当“全选”复选框未被选中时，取消所有子复选框的...

    DataGridView 复选框全选。

    以上就是实现`DataGridView`复选框全选功能的基本步骤。在实际应用中，你可能还需要考虑更多细节，比如如何同步模型数据、处理行插入和删除等。通过这个功能，用户可以更便捷地对大量数据进行批量操作，极大地提高了...

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

    有时候，我们希望在表格的表头中添加复选框，以便实现全选或取消全选的功能，这在处理大量数据时尤其有用。本篇文章将详细解释如何在`QTableWidget`的表头中添加复选框并实现全选功能。 首先，我们需要了解`...

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

    在网页开发中，表格（Table）是常用的数据...总的来说，实现HTML表格中复选框的全选与反选功能主要依赖于JavaScript和CSS（用于样式），这是一项基础但重要的交互设计。理解并掌握这个功能，有助于提升网页的用户体验。

    复选框全选和反选.zip

    这个"复选框全选和反选.zip"文件可能包含了一个JavaScript实现的解决方案。JavaScript是一种广泛使用的客户端脚本语言，用于为网页添加交互性。 复选框（Checkbox）是HTML中的一个基本元素，它允许用户对一个选项...

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

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

    JS实现复选框全选全不选以及子复选框带动全选框的选中

    在网页交互设计中，复选框...综上所述，通过JavaScript实现复选框全选全不选以及子复选框带动全选框的选中功能，主要涉及事件监听、DOM操作和状态同步。这种交互设计能提高用户操作的便捷性，提升网页应用的用户体验。

    JS控制复选框全选、反选,可进行同一页面多个复选框全选控制V2 .0

    在本项目"JS控制复选框全选、反选,可进行同一页面多个复选框全选控制V2.0"中，我们将探讨如何利用JavaScript实现对复选框（checkbox）的全选、反选功能，并获取选中的复选框的值。这些功能在用户界面中常见于批量...

    html JavaScript js复选框的全选，多选，全选,全不选，反选

    在这个例子中，我们有三个复选框，每个都有不同的值，并且我们添加了三个特殊的复选框用于控制全选、全不选和反选。 接下来，我们需要在JavaScript中定义相应的函数来处理这些操作。这些函数可以通过`onclick`事件...

    jquery实现复选框全选和反选

    《锋利的jquery》利用jquery实现复选框的全选和反选

Magicbox
Global site tag (gtag.js) - Google Analytics