全选/取消复选框

最新推荐文章于 2024-05-06 18:26:11 发布
最新推荐文章于 2024-05-06 18:26:11 发布
阅读量562 收藏
点赞数
分类专栏： js实用 文章标签： input javascript function action import string
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hero5460/article/details/4476955
版权

1./****checkbox.html****/

<html>
<head>
</head>
<script language="javascript" src="checkbox.js">
</script>
<body>
<form id="form1" name="form1" method="post" action="display.jsp">
  <input type="checkbox" name="checkbox" value="足球" />
  足球
  <input name="checkbox" type="checkbox" id="checkbox" value="篮球" />
篮球
<input name="checkbox" type="checkbox" id="checkbox" value="排球" />
排球
<input onClick="if(this.checked==true) { checkAll('checkbox'); } else { clearAll('checkbox'); }" type="checkbox" name="selectAll" title="全选/取消"/>
全选/取消
<input type="submit" name="Submit" value="提交" />
</form>
</body>
</html>

 

2./****checkbox.js****/

// JavaScript Document
function selectAll()
{
if(this.checked==true) {
checkAll('test');
}
else {
clearAll('test');
}
}
function checkAll(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 = 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;
}
}
}

 

3../****display.jsp****/

<%@ page contentType="text/html; charset=gbk" language="java" import="java.sql.*" errorPage="" %>
<html>
<head>
<title>显示</title>
</head>
<body>
<h4>你选择的是：</h4>
<%
request.setCharacterEncoding("gbk");
String selectAll[]=request.getParameterValues("checkbox");
if(selectAll!=null &&selectAll.length>0)
{
   for(int i=0;i<selectAll.length;i++)
   {
     
%>
<%=selectAll[i]%>
<%
   }
 }else{  
%>
<h4>你还未选择,请重新选择.<a href="javascript:history.back();">返回</a></h4>
<%}%>
</body>
</html>

hero5460
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
bpmn-js推荐几款常用的插件
飞云先生
04-30 118
bpmn-js整体框架库的风格是以组件的方式进行实现的，这样的结构也更加便于我们更好的对其进行功能扩展，以及客制化功能实现。其实bpmn.io已经为我们实现了较多场景的组件的实现，了解对应组件的功能更能便于我们区分是否需要自己实现，降低重复造轮子的行为，提高开发效率，本篇文章主要是介绍常见的bpmn-js中使用的组件库。
jQuery实现复选框全选/取消全选/反选及获得选择的值
10-25
主要介绍了jQuery实现的复选框全选/取消全选/反选及获得选择的值,需要的朋友可以参考下
jquery复选框全选/取消示例
10-26
jquery复选框全选/取消示例,实现点击复选框的时候全选所有的子复选框，再点击取消所有复选框的选中状态
JS-DOM编程-05-复选框的全选与取消全选
TSCCG的博客
08-07 1150
JS-DOM编程-05-复选框的全选与取消全选 1.当点击全选框时，选中所有复选框 复选框对象的checked属性代表复选框是否被选中： 如果值为true，则表示复选框被选中 如果值为false，则表示复选框未被选中 我们可以利用checked属性来实现功能。 在全选框中设置一个click事件，当点击全选框时，遍历所有复选框对象， 将全选框的checked属性值赋给所有复选框的checked属性。 <!DOCTYPE html> <html lang="en"> <head
Qt QListWidget项目知识点小结
cpp_learner的博客
01-17 2871
学习QListWidget时做的一个小项目，并把项目中所使用到的知识点都记录下来。
layui表格checkbox选择全选样式及功能
热门推荐
张营的技术博客
03-17 6万+
在之前的版本，默认复选框是要有值得，默认为“勾选”两个字，在表格里用来做选择不适合，很难改，还好layui升级后，可以支持不写name值，来适应表格中的选择操作。 1.layui版本号为 v1.0.9 rls版本(当前最新版本)     人物 民族 出场时间 格言
Tkinter 复选框实现全选/取消功能
hellangle4742的博客
06-04 1632
Tkinter实现复选框全选功能
jQuery中复选框checkbox实现复选框的全选/全不选，点击按钮实现复选框的全选/全不选/反选
知来者犹可追
11-29 2349
&amp;lt;table&amp;gt; &amp;lt;tr&amp;gt; &amp;lt;td&amp;gt; &amp;lt;input type=&quot;checkbox&quot; name=&quot;check&quot; /&amp;gt;1 &amp;lt;input type=&quot;checkbox&quot; nam
javascript 实现复选框全选/取消功能
03-23
javascript 实现复选框全选/取消功能
基于React实现B站评论区
stu_kk的博客
05-02 921
使用React构建了一个仿照B站基本的前端评论系统，实现了动态加载、排序、添加和删除评论的基本功能。通过React的状态管理和事件处理机制，实现了交互式的用户体验。但是在实际应用中，还需考虑与后端接口的交互、错误处理、分页加载、以及更复杂的用户交互逻辑。
《ElementUI 基础知识》el-tabs header 监听鼠标中键滚动时左右滑动（ElementPlus同样适用）
前端技术
04-29 991
监听 el-tabs 头在鼠标 hover 时。滑动鼠标中键，可左右滑动！
表格隔行变色
weixin_54339833的博客
05-02 376
2.$(document).ready() 是 jQuery 中的一个函数，它确保在文档结构（DOM）加载完成后执行指定的代码。与原生 JavaScript 的 window.onload 不同，$(document).ready() 会在 HTML 文档结构被加载和解析完成后立即执行，而无需等待样式表、图片和子框架的完成加载。if (index % 2 === 0) { // 偶数行。if (i % 2 === 0) { // 偶数行。// 可以省略，因为默认背景色通常是白色。
vue3引入element-plus完整步骤
最新发布
zzx262625的博客
05-06 129
如果你的项目需要在低版本浏览器上运行，你可能需要使用一些转换工具（如Babel、ESBuild）和polyfill来确保兼容性。在你的Vue项目中配置一个编译器（如Vue CLI、Vite等），然后运行你的项目。你可以尝试在你的组件中使用一些Element Plus的组件来确保它们正常工作。使用npm（或cnpm，如果你在中国并且希望使用淘宝的npm镜像）来安装Element Plus。这样，你就可以在你的Vue组件中使用Element Plus的图标了。在你的Vue 3项目的入口文件（通常是。
数据交换和异步请求(JSON&Ajax))
vV_Leon的博客
05-06 503
数据交换异步请求技术
菜鸡学习netty源码（三）—— Reactor 模型
u013127325的博客
05-03 536
我们先进行理解一下Reactor模型，知道什么是Reactor模型，它有什么特别之处。我们先来简单介绍一下这个Reactor模型。Reactor模型的核心思想：就是将所关注的I/O事件进行注册到一个多路复用器上，一旦有I/O事件的发生，将事件进行分发到对应的事件处理器中，执行I/O事件对应的函数。Rector模型有3中模型的实现：单Reactor单线程模型，单Reactor多线程模型，多Reactor多线程模型。
echarts+百度地图如何定义边界线
abc8002117034的博客
04-30 305
5.setOption里面的参数option.series是echarts散点图的配置项,option.bmap是百度地图的配置项，比如center是当前地图的中心点，zoom是缩放数值，roam是是否可以缩放，mapStyle是地图的样式。3.方法getCenterPoint是获取当前区域中心点的经纬度，我们将会在区域的中心点显示区域名称和具体数值。4.方法convertData返回的是地图上红色散点里面的数据，是对idata的数据格式做的一层转换。2.变量styleJson是地图的样式，可以去。
前端 | iframe框架标签应用（二）| 外部页面导入
因为健忘，所以记点有的没的〒▽〒
05-06 796
点击右上角喇叭，弹出iframe页面框，链接bilibili白噪音视频页面；点击关闭按钮，关闭弹出框。
小区服务|基于SprinBoot+vue的小区服务管理系统(源码+数据库+文档)
weixin_66413741的博客
05-01 1079
这次开发的小区服务管理系统对安保管理、安保分配管理、客服聊天管理、字典管理、房屋管理、反馈管理、论坛管理、公告管理、反馈处理管理、住户管理、员工管理、管理员管理等进行集中化处理。经过前面自己查阅的网络知识，加上自己在学校课堂上学习的知识，决定开发系统选择B/S模式这种高效率的模式完成系统功能开发。这种模式让操作员基于浏览器的方式进行网站访问，采用的主流的Java语言这种面向对象的语言进行小区服务管理系统程序的开发，在数据库的选择上面，选择功能强大的Mysql数据库进行数据的存放操作。
html复选框全选和取消全选
05-14
可以使用JavaScript实现复选框的全选和取消全选功能。以下是示例代码： ```html <!DOCTYPE html> <html> <head> <title>复选框全选/取消全选示例</title> <script type="text/javascript"> function selectAll(source) { checkboxes = document.getElementsByName('items'); for(var i=0, n=checkboxes.length;i<n;i++) { checkboxes[i].checked = source.checked; } } </script> </head> <body> <h2>复选框全选/取消全选示例</h2> <form> <input type="checkbox" onClick="selectAll(this)" />全选/取消全选 <br/><br/> <input type="checkbox" name="items" value="item1" />选项1 <br/> <input type="checkbox" name="items" value="item2" />选项2 <br/> <input type="checkbox" name="items" value="item3" />选项3 </form> </body> </html> ``` 在上面的示例中，我们首先定义了一个JavaScript函数`selectAll()`，该函数接受一个参数`source`，表示全选/取消全选复选框的状态。在函数中，我们使用`document.getElementsByName()`方法获取所有的`name`属性为`items`的复选框，然后遍历这些复选框，将它们的`checked`属性设置为`source.checked`，即全选/取消全选复选框的状态。最后，在HTML中，我们通过`onClick`属性将全选/取消全选复选框的状态传递给`selectAll()`函数。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值