javascript checkbox全选 反选 取消全部

最新推荐文章于 2022-12-09 09:28:33 发布
原创 最新推荐文章于 2022-12-09 09:28:33 发布 · 174 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#JavaScript #ASP.net #ASP #CSS #JSP #ViewUI

本文介绍了一种使用JavaScript来控制多个Checkbox全选、反选及取消选择的方法。通过简单的函数实现，能够方便地应用于网页表单中，提高用户体验。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>javascript checkbox全选 反选 取消全部</title>
<script language="javascript" type="text/javascript">
<!--
//全选
function test()
{
for(i=0;i<document.MyForm.elements.length;i++)
{
f =document.MyForm.elements[i];
if(f.checked==false)
{
f.checked=true;
}
}
}
//反选
function ftest()
{
for(i=0;i<document.MyForm.elements.length;i++)
{
f =document.MyForm.elements[i];
if(f.checked==false)
{
f.checked=true;
}
else
{
f.checked=false;
}
}
}
//取消全部
function CancelAll()
{
for(i=0;i<document.MyForm.elements.length;i++)
{
f =document.MyForm.elements[i];
if(f.checked==true)
{
f.checked=false;
}
}
}
-->
</script>
</head>

<body>
<form name="MyForm">
<input type="checkbox" name="MyCheckbox1" title="ASP" value="ASP" />ASP
<input type="checkbox" name="MyCheckbox2" title=".Net" value=".Net" />.Net
<input type="checkbox" name="MyCheckbox3" title="Jsp" value="Jsp" />Jsp
<input type="checkbox" name="MyCheckbox4" title="Css" value="Css" />Css
<input type="checkbox" name="MyCheckbox5" title="Html" value="Html" />Html
<input type="checkbox" name="MyCheckbox6" title="全选" value="全选" onclick="test()" />全选
<input type="checkbox" name="MyCheckbox7" title="反选" value="反选" onclick="ftest()" />反选
<input type="checkbox" name="MyCheckbox8" title="反选" value="取消全部" onclick="CancelAll()" />取消全部
</form>
</body>
</html>
jquery、js操作checkbox全选反选.docx
01-19
### jQuery与JavaScript操作Checkbox全选反选 #### 一、引言 在Web开发中，Checkbox（复选框）是一种非常常见的用户界面元素，用于收集用户的多选输入。尤其是在表单设计时，Checkbox的全选与反选功能极大地方便了...
三种方式实现checkbox全选，反选
09-27
以下是三种实现Checkbox全选和反选的方法，以及它们的JavaScript和Java实现细节。 ### 方法一：使用`checked`属性 **JavaScript实现**： 在JavaScript中，可以通过获取全选按钮的`checked`属性来控制所有复选框的...
JavaScript全选和反选
04-30
<script language=javascript> function checkAll(boolvalue){ var items=document.getElementsByTagName("input"); for(i=0;i<items.length;i++){ if(items[i].type=="checkbox"){ items[i].checked=boolvalue; } } } //反选 function IscheckAll(boolvalue){ var items=document.getElementsByTagName("input"); for(i=0;i<items.length;i++){ if(items[i].type=="checkbox"){ if(items[i].checked==true){ items[i].checked=false; }else{ items[i].checked=boolvalue; } } } } </script>
JS实现checkbox全选反选
xiaomajia029的博客
04-12 1664
需求： 1. 点击全选框，所有的子选项全部选中；再次点击，所有的子选项全部取消选中状态。 2. 当所有的子选项全部选中时，全选框状态改为选中；子选项有一个没有选中，全选框不选中。 3. 点击反选按钮，所有的子选项改变选中状态。 HTML结构： <div class="wrap"> <table> <thead> ...
javascript实现全选/全不选/反选
№逆☆风℃‰
03-25 262
function dosubmit(name,id) { var names=document.getElementById(id); if(names.checked==true){ checkedAll(name) } else{ checkedNo(name) } } //全选 function checkedAll(name) ...
JS实现checkbox的全选和反选
weixin_53748496的博客
12-09 2077
【代码】JS实现checkbox的全选和反选。实现以下功能： （1）当选中表头的商品 价格前的checkbox框时，下面的每个商品都会被选中。（全选） （2）当选中所有商品时，表头的商品 价格前的checkbox框自动被选中。（反选） （3）只要有一个商品没被选中，表头的商品 价格前的checkbox框就不会被选中。
javascript全选反选
世間所有的相遇，都是久別重逢
03-17 870
//获取下拉列表中选中的文本的值 var sd=document.getElementById("sed"); alert(sd.options[sd.selectedIndex].text); var ds=$("#sed option:selected").text(); $(function() { //全选 按钮的方式实现 $("#qu").click(function() {
js checkbox全选 反选 取消全部设置表单html复选框
10-27
"js checkbox全选 反选 取消全部设置表单html复选框"这个标题描述了一个常见的功能需求，即通过JavaScript控制HTML中的复选框（checkboxes），实现全选、反选和取消全部选中的功能。在本文中，我们将深入探讨如何...
js checkbox全选 反选 取消全部设置表单html复选框勾选
11-24
当涉及到HTML表单中的复选框（checkbox）时，全选、反选和取消全部勾选的功能是非常常见的需求。这些功能可以提高用户体验，让用户能够方便地选择或取消一组相关选项。本文将详细讲解如何利用JavaScript实现这些功能...
jquery checkbox全选反选效果代码
12-04
2. checkbox全选和反选是web开发中常见的功能，一般用于多选项列表，允许用户选择全部项目或取消选择所有项目。 3. 实现全选和反选的基本原理是：获取所有checkbox的DOM对象，并通过循环设置它们的checked属性为true...
Javascript实现全选反选
08-11
Javascript实现全选反选 Javascript绑定事件
javascript全选、反选
qq_33088807的博客
12-18 215
<!DOCTYPE html> <html> <head> <title>test</title> </head> <body> <form> <div class="biaodan"> <p><input type="checkbox" name="" value="" id="checkedAll">全选</p> <input typ.
javascript实现全选反选功能
qq_34928693的博客
08-17 361
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
javascript实现全选,反选
weixin_30587927的博客
11-15 93
<script type="text/javascript" language="javascript"> function selectBox(selectType){ var checkboxis = document.getElementsByName("Checkbox"); if(selectType == "r...
JavaScript的全选与反选
qq_26925297的博客
04-11 435
&lt;body&gt;           &lt;table&gt;    &lt;tr&gt;            &lt;td&gt;&lt;input type="checkbox" name="hobby"&gt;&lt;/td&gt;       &lt;td&gt;篮球&lt;/td&gt;    &lt;/tr&a
javascript 全选与反选
Tjhfsghbjknjdy的博客
12-12 421
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> //获取checkbox按钮组 var allp...
用JavaScript实现全选-反选
weixin_43939158的博客
12-25 307
实现全选-反选 在日常生活我们会遇到需要全选-反选的地方，其实用JavaScript也能实现。 样式如下所示： 样式代码如下所示： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <...
javascript实现全选，反选功能
qq_42685050的博客
08-10 250
今天看项目发现有全选和反选的按钮实现，比较感兴趣，从网上搜索了自己实现了一下 实现的方式就是 在我们的按钮中设置响应的事件，然后在我们的函数中，通过定义的多选按钮的name遍历通过  if...else...判断将状态改变，原文章地址  这里需要注意括号的对应，还有拼写的正确，(我在多选按钮中少写了个c，导致操作失败) &lt;!DOCTYPE html&gt; &lt;html lang...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值