jQuery实现多选框的全选按钮自动选中与消失
2017-09-12 11:01
567 查看
页面中实现全选,反选,一组复选框选中时全选按钮自动选中,一组中有一个未选中时全选按钮取消
这里是checkOne()是在每个复选框的onclick方法中调用的, 由于我这里的一组复选框是动态用jquery拼接车来的, 所以不能用jquery的方式$().click()来注册点击事件(经多次测试用jquery注册不得行, 点击无任何反应), 这里就必须将方法在拼接的js中使用onclick来调用方法.
此例子可以实现: 1. 选中全选框时,一组复选框被选中
2. 反选全选框时,一组复选框都不被选中
3. 一组复选框中都选中时, 自动勾选全选框
4. 一组复选框中有一个未被选中时, 全选框勾去除
*本文章装载自 跌跌撞撞的小时代 的博客
$('#checkAll').click(function(){ if(this.checked) { $("input[type=checkbox][name=ckjsmc]").each(function(){ $(this).attr('checked', 'true'); }); } else { $("input[type=checkbox][name=ckjsmc]").each(function(){ $(this).removeAttr('checked'); }); } }); function checkOne(){ var count = 0; $("input[type=checkbox][name=ckjsmc]").each(function(){ if($(this).attr('checked') != 'checked'){// 判断一组复选框是否有未选中的 count+=1; } }); if(count == 0) { // 如果没有未选中的那么全选框被选中 $('#checkAll').attr('checked', 'true'); } else { $('#checkAll').removeAttr('checked'); } }
这里是checkOne()是在每个复选框的onclick方法中调用的, 由于我这里的一组复选框是动态用jquery拼接车来的, 所以不能用jquery的方式$().click()来注册点击事件(经多次测试用jquery注册不得行, 点击无任何反应), 这里就必须将方法在拼接的js中使用onclick来调用方法.
此例子可以实现: 1. 选中全选框时,一组复选框被选中
2. 反选全选框时,一组复选框都不被选中
3. 一组复选框中都选中时, 自动勾选全选框
4. 一组复选框中有一个未被选中时, 全选框勾去除
*本文章装载自 跌跌撞撞的小时代 的博客
相关文章推荐
- jQuery实现拉动页面固定顶部显示且自动消失(火狐)
- jquery实现全选、反选、获得所有选中的checkbox
- jQuery实现的全选、反选和获取当前所有选中的值功能
- Jquery 网站保存信息提示消息实现,提示后自动消失
- JQuery实现Android底部按钮自动更新
- Jquery实现全选和反选并获取选中行
- jQuery实现点击复选框即高亮显示选中行 全选、反选
- Jquery 点击按钮自动高亮实现原理及代码
- jquery 提示信息显示后自动消失的具体实现
- 实现点击单选按钮后面的文字说明自动选中相应单选按钮功能
- jquery实现(多选框)全选和取消全选功能
- 利用javaScript实现的全选、反选(当子项全部选中的时候全选框中的勾自动打上)
- jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
- jquery实现带单选按钮的表格行选中时高亮显示
- jQuery实现通知自动消失
- 多选框全选中,全选框自动选中
- jquery实现表单中选择框/选中按钮是否选中遍历检查(提交页面中选择题答案)
- jQuery jForm ajax 单击选中文件直接自动上载 无需提交按钮
- js全选,全选以后,如果选中其中一个,全选效果取消,如果复选框全部选中,全选按钮自动也被选中
- jquery中将选中的按钮值取出来 全选,全不选