jquery实现checkbox全选和全部取消，以及获取值

时间：2022-12-03 00:26:50

　　在后台管理中经常会遇到列表全选和取消的功能，如评论审核、申请等，用到的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>

 

标签：

相关文章