jQuery全选反选与获取选中值操作
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
,别再被老教程带歪了。
下载地址
用户评论