【jQuery】复选框的批量处理:全选、非全选
2015-07-27 00:24
603 查看
最近工作都在写jQuery,事实上我并没有系统学过js,今天跟大家分享一下最近写的一个有关复选框的批量处理。
这里的复选框批量处理是删除操作。当选择“全选”按钮时,其他的复选框也会全部选中,这种“全选”复选框一般用在列表中,选中之后列表的所有列都会选中。选中之后若把列表中其中一行复选框去掉,全选的复选框也要不选中。当点击“删除所选”按钮的时候要删除选中复选框所在的行。
下面是JQ代码:
大家略作参考吧。
Author:立礼
Sign:人生不要有太多的幻想,而要有更多的行动。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试</title> </head> <body> <input type="button" class="button" onclick="delChecked()" value="删除所选"> <table border="1px"> <tr> <td> <input type="checkbox" id="city" value="0" name="city_qx"> <label for="city">全选</label> </td> <td>城市</td> </tr> <tr> <td><input type="checkbox" value='+this.id+' onClick="isChecked($(this))" name="city"></td> <td>广州市</td> </tr> <tr> <td><input type="checkbox" value='+this.id+' onClick="isChecked($(this))" name="city"></td> <td>深圳市</td> </tr> <tr> <td><input type="checkbox" value='+this.id+' onClick="isChecked($(this))" name="city"></td> <td>杭州市</td> </tr> </table> </html>
这里的复选框批量处理是删除操作。当选择“全选”按钮时,其他的复选框也会全部选中,这种“全选”复选框一般用在列表中,选中之后列表的所有列都会选中。选中之后若把列表中其中一行复选框去掉,全选的复选框也要不选中。当点击“删除所选”按钮的时候要删除选中复选框所在的行。
下面是JQ代码:
<script> $(function(){ //全选 $(":input[name='city_qx']").click(function(){ if($(this).attr("checked") == true){ $(":input[name='city']").attr("checked",true); }else{ $(":input[name='city']").attr("checked",false); }; }); }) function isChecked(obj){ //非全选 if(obj.attr("checked") == false){ $(":input[name='city_qx']").attr("checked",false); } } //删除 function del(id,obj){ $.ajax({ //略 }) } //删除所选 function delChecked(){ $("input[name='city']:checked").each(function () { del($(this).val(),$(this)); }); } </script>
大家略作参考吧。
Author:立礼
Sign:人生不要有太多的幻想,而要有更多的行动。
相关文章推荐
- jquery相关
- jQuery实现图片与文字描述左右滑动自动切换的方法
- jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法
- jquery实现TAB选项卡鼠标经过带延迟效果的方法
- JQUERY实现网页右下角固定位置展开关闭特效的方法
- jquery实现在线考试js
- jquery post请求向后台传数组
- jQuery阻止冒泡和HTML默认操作
- jQuery攻略
- JQuery日历控件
- jQuery(三)
- jQuery的.bind()、.live()和.delegate()之间区别
- jQuery+Ajax+Jsp做二级级联
- freemarker的学习
- jquery表单验证插件
- MediaElement教程
- 用jQuery与JSONP轻松解决跨域访问的问题
- 深度理解Jquery 中 offset() 方法
- JQuery判断元素是否存在
- JQuery选择器中的一些注意事项