HTML 中　checkbox 的全选

最新推荐文章于 2021-03-04 04:25:00 发布
原创 最新推荐文章于 2021-03-04 04:25:00 发布 · 5.5k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html #input #button #microsoft #function #c

该博客展示了一个HTML页面，通过JavaScript实现了复选框的全选、全不选和选择转换功能。页面包含9个复选框及三个按钮，分别调用不同的函数来操作复选框状态，体现了HTML与JavaScript在前端交互中的应用。

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>C1 C2 C3 C4 C5 C6 C7 C8 C9</title>
</head>


<body>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
  function checkAll() {
     for (var j = 1; j <= 9; j++) {
        box = eval("document.checkboxform.C" + j);
        if (box.checked == false) box.checked = true;
     }
  }
  function uncheckAll() {
     for (var j = 1; j <= 9; j++) {
         box = eval("document.checkboxform.C" + j);
         if (box.checked == true) box.checked = false;
     }
  }
 
  function switchAll() {
      for (var j = 1; j <= 9; j++) {
      box = eval("document.checkboxform.C" + j);
      box.checked = !box.checked;
  }
}
//  End -->
</script>
<form name=checkboxform>
<input type=checkbox name=C1 checked>C1<br>
<input type=checkbox name=C2 checked>C2<br>
<input type=checkbox name=C3 checked>C3<br>
<input type=checkbox name=C4 checked>C4<br>
<input type=checkbox name=C5 checked>C5<br>
<input type=checkbox name=C6 checked>C6<br>
<input type=checkbox name=C7 checked>C7<br>
<input type=checkbox name=C8 checked>C8<br>
<input type=checkbox name=C9 checked>C9<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>

界面：
C1
C2
C3
C4
C5
C6
C7
C8
C9




html实现全选与取消全选，单选
骨子里的偏爱
08-10 601
【代码】html实现全选与取消全选，单选。
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
10-29
CheckBox全选/取消全选是指在一个CheckBox组中，选择或取消选择所有CheckBox的功能。这种功能在实际应用中非常常见，例如在多选题中，用户可以选择所有选项或取消选择所有选项。CheckBox遍历是指遍历CheckBox组，...
Checkbox全选反选.html
12-10
Checkbox全选反选.html
实现table表格checkbox复选框的全选 反选
11-11
实现table表格checkbox复选框的全选 反选.
Html checkbox全选
weixin_33989780的博客
03-04 199
html中全选 <table class="data-table td-center"> <tr> <td><input type="checkbox" id="ckAll" name="checkAll" />全选&...
html checkbox全选实现
qq_37746647的博客
08-26 1258
html 全选<input id="checkAll" type="checkbox"/> 菜单一<input class="check" type="checkbox"/> 菜单二<input class="check" type="checkbox"/> 菜单三<input class="check" type="checkbox"/> js...
利用Bootstrap实现表格复选框checkbox全选
12-29
首先来看看实现的效果图： ...HTML中无需添加额外的一列来表示复选框，而是由JS完成，所以正常的表格布局就行了： 类别编号 类别名称 类别组 状态 说明 <td>C00001 机车 机车 有效 <t
javascript中CheckBox全选终极方案
10-24
在JavaScript编程中，实现CheckBox全选功能是一项常见的需求，特别是在数据展示或用户交互的场景下，如ASP.NET中的Gridview或Repeater控件。这里我们将深入探讨一种在ASP.NET环境中利用JavaScript实现CheckBox全选和...
vue checkbox 全选 数据的绑定及获取和计算方法
12-29
html <input type='checkbox' v-model='checkboxModel' :value='z.coach_id+-+z.amount' :i=dianji @click=lll>...全选</span></span> 第二个 定义 return { dianji:'12', list: [], value:{}, value1:
Checkbox全选问题
12-27
HtML javascritp checkbox 全选HtML javascritp checkbox 全选
html中checkbox的全选
weixin_30632089的博客
08-01 319
<body><script type="text/javascript" language="javascript">function check(){ var oo=document.getElementsByName("pro"); //通过.getElementsByName()把name为“pro”的复选框定义成集合 for(var i=0;i<oo.len...
Html：实现checkbox全选、非全选、单选
stay hungry ! stay foolish!
11-09 3552
                    Html：实现checkbox全选、非全选、单选   全局选择与单选有以下两点关系： 1、当我把所有单选都选择上的时候，全选应该是被选择状态 2、当我取消一个单选时，全选应该是取消的状态 3、点击全选按钮，所有的单选都被选上；取消全选按钮，所有的单选都被取消 一个很简单的功能，那就直接代码实现了吧 jsp的代码： &lt;table class=...
html checkbox 实现全选/取消全选
热门推荐
GraceUp
06-26 4万+
html checkbox  实现全选/取消全选 Month Savings January $100 February $150 <script type="text/javascript" src="http://apps.bdimg.com/libs
html table中嵌入checkbox实现全选
Just Code
09-27 1万+
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <% Connection ct = null; PreparedStatement ps = null; ResultSet rs = null; String DRIVER = "com.mys
html checkbox mysql_html table中嵌入checkbox实现全选 | 学步园
weixin_33957278的博客
03-04 357
pageEncoding="utf-8"%>Connection ct = null;PreparedStatement ps = null;ResultSet rs = null;String DRIVER = "com.mysql.jdbc.Driver";String URL = "jdbc:mysql://localhost:3306/smg";String USERNAME = "...
Html中checkbox全选/取消
qq_36996931的博客
03-22 851
1.Html代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <!-- 引入Jquery --> <script type="text/javascript" src="js/jquery-1....
html checkbox全选反选
HardProgrammer的博客
03-25 317
<html> <body> <table border="1"> <tr> <th><input type="checkbox" onclick="swapCheck()" /></th> <th>Month</th&gt...
HTML多选框，全选，多选
anzhen9的博客
08-17 1万+
项目中用到的，结合网上看的一些例子，整了一个，多选全选的玩意儿，如有雷同纯属巧合（手动滑稽） 没有做反选操作相关的功能 用jquery整的 然后对应的全选checkbox 再然后就是那一堆的多选checkbox了 来个效果的。。。。
uview中checkbox全选
最新发布
03-26
### uView Checkbox 组件全选功能实现 在 uView 框架中，可以利用 `v-model` 和事件绑定机制来实现全选和反选的功能。以下是基于 Vue 的响应式数据管理以及 uView 提供的组件特性所设计的一个完整解决方案。 #### 数据结构定义 为了支持全选逻辑，通常会维护两个变量：一个是用于存储当前已勾选项的数据数组；另一个是布尔类型的标志位，表示是否处于全选状态。 ```javascript data() { return { options: [ { name: '选项一', value: 'option1' }, { name: '选项二', value: 'option2' }, { name: '选项三', value: 'option3' } ], selectedOptions: [], // 已选择项集合 isAllChecked: false // 是否全选标记 }; } ``` #### 计算属性 通过计算属性动态判断当前是否有部分或全部被选中的情况： ```javascript computed: { isCheckedPartially() { return this.selectedOptions.length > 0 && this.selectedOptions.length < this.options.length; } } ``` #### 方法定义 当点击全选按钮或者某个单独的选择框发生变化时，触发对应的方法更新状态。 ```javascript methods: { toggleAllSelection(value) { if (value === true || value === undefined) { this.isAllChecked = !this.isAllChecked; // 切换全选状态 this.selectedOptions = this.isAllChecked ? this.options.map(option => option.value) : []; } else { const checkedValues = Array.isArray(value) ? value : [value]; this.selectedOptions = [...new Set([...this.selectedOptions, ...checkedValues])]; // 合并去重后的值 } // 更新isAllChecked的状态 this.updateIsAllChecked(); }, updateIsAllChecked() { this.isAllChecked = this.selectedOptions.length === this.options.length; } } ``` #### 页面模板编写 使用 uView 的 `<u-checkbox-group>` 和 `<u-checkbox>` 来构建界面布局，并绑定相应的事件处理器。 ```html <view> <!-- 全选 --> <u-checkbox v-model="isAllChecked" @change="toggleAllSelection"> 全选 </u-checkbox> <!-- 单独选项 --> <u-checkbox-group @change="handleSingleSelectChange"> <block v-for="(item, index) in options" :key="index"> <u-checkbox shape="circle">{{ item.name }}</u-checkbox> </block> </u-checkbox-group> </view> ``` 其中，在单个复选框变化时也需要同步调整整体的选择状况： ```javascript handleSingleSelectChange(e) { this.toggleAllSelection(e); } ``` 以上代码片段展示了如何在 uView 中实现一个基本的全选与单项选择交互模式[^1]。此方案不仅适用于简单的表单场景，还可以扩展到更复杂的业务需求上，比如带有分页加载的大规模列表操作等情境下也能保持良好的用户体验[^2]。 #### 注意事项 - 需要确保每次修改 `selectedOptions` 数组之后及时刷新视图。 - 如果涉及到异步请求获取初始数据，则应在数据准备完毕后再初始化相关字段，默认情况下可能需要设置为空数组或其他默认值以防止未定义错误发生[^3]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值