jquery实现全选、全不选以及单选功能
2019/6/27 21:04:25
本文主要是介绍jquery实现全选、全不选以及单选功能,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
效果图:
代码如下:
<link rel="stylesheet" href="http://wiki.jikexueyuan.com/project/bootstrap4/dist/css/bootstrap.min.css" rel="external nofollow" > <script src="https://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"> </script> <table class="table table-bordered "> <thead class="tab_head"> <tr> <td> <input type="checkbox" onclick="selectAll()"></td> <th>角色名称</th> <th>角色说明</th> <th>所属系统</th> </tr> </thead> <tbody> <tr> <td> <input type="checkbox"></td> <td>系统管理员</td> <td>管理员角色</td> <td>武进公安平台</td> </tr> <tr> <td> <input type="checkbox"></td> <td>系统管理员</td> <td>管理员角色</td> <td>武进公安平台</td> </tr> <tr> <td> <input type="checkbox"></td> <td>系统管理员</td> <td>管理员角色</td> <td>武进公安平台</td> </tr> </tbody> </table> <script> function selectAll(){ $("input[type='checkbox']").each( function() { if($(this).prop("checked")==true) { $("input[type='checkbox']").prop('checked', true); return; } else { $("input[type='checkbox']").prop('checked', false); return; } }); } </script>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持找一找教程网!
这篇关于jquery实现全选、全不选以及单选功能的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-24Vue CLI多环境配置学习:从入门到实践
- 2024-11-24Vue CLI多环境配置学习:新手入门教程
- 2024-11-24Vue CLI学习:初学者指南
- 2024-11-24Vue CLI学习:从入门到上手的简单教程
- 2024-11-24Vue3+Vite学习:从零开始的前端开发之旅
- 2024-11-24Vue3阿里系UI组件学习入门教程
- 2024-11-24Vue3的阿里系UI组件学习入门指南
- 2024-11-24Vue3公共组件学习:新手入门教程
- 2024-11-24Vue3公共组件学习入门指南
- 2024-11-24vue3核心功能响应式变量学习