1. 首页
  2. 编程语言
  3. Web开发
  4. jQuery全选反选与获取选中值操作

jQuery全选反选与获取选中值操作

上传者: 2025-05-27 07:21:53上传 ZIP文件 3.98KB 热度 2次

jQuery 的复选框操作,算是前端老朋友了。不管是多选表单、后台管理表格,还是投票组件,全选、反选、拿选中值这三板斧几乎天天用。你要是还一行行写checked判断,效率可就跟不上了。

全选操作,其实简单,就一句$("input[type=checkbox]").prop("checked", true)搞定。以前用attr也行,但现在推荐用prop,兼容性和语义都更靠谱。

反选稍微多点逻辑,不过也不复杂,遍历一下所有的复选框,each一轮,用prop("checked", !this.checked)切换状态就完事了。嗯,逻辑清晰,写起来也挺顺。

至于获取选中值,这就更常见了。你可以用$('input[type=checkbox]:checked')筛选出勾选项,.each()循环读取value,用join(', ')拼成字符串展示给用户,界面交互也更友好。

这个功能看着简单,但实际项目里用得挺频繁的。是配合 AJAX、批量操作、权限分配时,全靠这些基础交互撑起来。你要是刚上手 jQuery,强烈建议试着抄几遍示例代码,加深理解。

哦对了,记得用prop代替attr,别再被老教程带歪了。

下载地址
用户评论