在下面这段html代码中加JS代码实现全选功能、取消功能、反选功能、提交按钮吗？<body> <div> <form action="#"> <div> 请选择你的爱好： <input type="checkbox" id="check-all" /> 全选 </div> <div> <input type="checkbox" name="hobby" value="学习"> 学习 <input type="checkbox" name="hobby" value="睡觉"> 睡觉 <input type="checkbox" name="hobby" value="健身"> 健身 <input type="checkbox" name="hobby" value="玩耍"> 玩耍 </div> <div> <button type="button" id="all">全选</button> <button type="button" id="no">取消</button> <button type="button" id="reverse">反选</button> <button type="button" id="send">提交</button> </div> </form> </div> </body>

时间: 2023-10-10 11:06:33 浏览: 107

可以通过以下JS代码实现全选、取消、反选、提交功能： ```javascript // 获取相关元素 const checkAll = document.getElementById('check-all'); const checkboxes = document.querySelectorAll('input[type="checkbox"][name="hobby"]'); const btnAll = document.getElementById('all'); const btnNo = document.getElementById('no'); const btnReverse = document.getElementById('reverse'); const btnSend = document.getElementById('send'); // 全选 btnAll.addEventListener('click', () => { checkboxes.forEach((checkbox) => { checkbox.checked = true; }); checkAll.checked = true; }); // 取消 btnNo.addEventListener('click', () => { checkboxes.forEach((checkbox) => { checkbox.checked = false; }); checkAll.checked = false; }); // 反选 btnReverse.addEventListener('click', () => { checkboxes.forEach((checkbox) => { checkbox.checked = !checkbox.checked; }); checkAll.checked = Array.prototype.every.call(checkboxes, (checkbox) => checkbox.checked); }); // 提交 btnSend.addEventListener('click', () => { const checkedValues = Array.prototype.filter.call(checkboxes, (checkbox) => checkbox.checked) .map((checkbox) => checkbox.value); console.log(checkedValues); // 可以将选中的值提交到后端 }); // 全选/取消全选 checkAll.addEventListener('change', () => { checkboxes.forEach((checkbox) => { checkbox.checked = checkAll.checked; }); }); ``` 将以上代码放在`<script>`标签中，插入到HTML代码中即可实现相应功能。

阅读全文

相关推荐

js实现全选和反选功能

今天把JS控制checkbox全选、取消全选、删除功能的代码贴出来。。。。。

基于JS实现checkbox全选功能实例代码

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

JS实现的全选、全不选及反选功能【案例】

js实现全选反选不选功能代码详解

利用jQuery实现CheckBox全选/全不选/反选的简单代码

如何在Android应用中实现RecyclerView的CheckBox全选、反选功能以及单选功能？请结合具体代码示例。

请利用HTML DOM实现全选、全不选、反选功能

请利用HTML DOM实现全选、全不选和反选功能。

“表单全选取消全选”，js实现全选与反选的功能

html选择歌曲全选取消反选按钮代码

Ant Design的表格组件 在表格外面设置一个全选按钮控制表格全选/反选 详细代码

js全选、反选、取消选择

JS checkbox实现全选与取消功能完整代码

javascript 单选按钮 单击选中 双击取消选择实现代码

最新推荐

Android Recyclerview实现多选,单选,全选,反选,批量删除的功能

微信小程序实现多选框全选与取消全选功能示例

react实现复选框全选和反选组件效果

体育课评分系统 微信小程序+SSM毕业设计 源码+数据库+论文+启动教程.zip

【东证期货-2024研报】短期关注天气能否触发惜售.pdf

JHU荣誉单变量微积分课程教案介绍

管理建模和仿真的文件

【实战篇：自定义损失函数】：构建独特损失函数解决特定问题，优化模型性能

如何在ZYNQMP平台上配置TUSB1210 USB接口芯片以实现Host模式，并确保与Linux内核的兼容性？

Naruto爱好者必备CLI测试应用

Ant Design的表格组件在表格外面设置一个全选按钮控制表格全选/反选详细代码

javascript 单选按钮单击选中双击取消选择实现代码

体育课评分系统微信小程序+SSM毕业设计源码+数据库+论文+启动教程.zip