jquery实现checkbox全选和全部取消,以及获取值
在后台管理中经常会遇到列表全选和取消的功能,如评论审核、申请等,用到的html标记就是checkbox。我用的是mysql数据库,代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>全选和取消全选</title> </head> <body> <table> <!-- 这里用整形的数字编号作为值--> <tr><td><input type="checkbox" class="check" value="1"/>苹果</td></tr> <tr><td><input type="checkbox" class="check" value="2"/>梨子</td></tr> <tr><td><input type="checkbox" class="check" value="3"/>橘子</td></tr> <tr><td><input type="checkbox" class="check" value="4"/>香蕉</td></tr> <tr><td><input type="checkbox" class="check" value="5"/>番茄</td></tr> <tr><td><input type="checkbox" class="check" value="6"/>黄瓜</td></tr> <tr><td><input type="checkbox" class="check" value="7"/>土豆</td></tr> <tr><td><input type="checkbox" class="check" value="8"/>莲藕</td></tr> <tr><td><input type="checkbox" id="choose"/>全选/取消</td><td id="do_choose">确定</td></tr> </table> <script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script> <script> //全选和取消 $('#choose').click(function(){ if($(this).attr('checked') == 'checked'){//全选 $('input.check').attr('checked', 'checked'); }else{//取消全选 $('input.check').removeAttr('checked'); } }); //获取选择的值 $('#do_choose').click(function(){ var test = $('input.check:checked'); console.log(test); if(test.length == 0){ alert('请选择!'); }else{ var str = ''; test.each(function(i){ if(i == 0){ str += parseInt($(this).val()); //需要将获取到的字符串值转为整数,下同 }else{ str += ',' + parseInt($(this).val()); } }); alert(str);//这里是获取到的数据,连接成','隔开的字符串是为了方便数据库使用'in'关键字。 } }); </script> </body> </html>