checkbox复选框全选批量删除
多选框全选实现批量删除
html代码
<body> <form action="" method="post" name="FormName" onsubmit="return checkbox();"> <table > <tr ><td><input type="checkbox" name="checkboxes[]" value="on" onclick="selectAll(this,'checkboxes')" /></td>
<td>全选</td></tr> this代表windows窗口对象
<tr> <td><input type="checkbox" name="checkboxes[]" value="2" /><td>游泳</td></td> </tr> <tr><td><input type="checkbox" name="checkboxes[]" value="1" /><td>绘画</td></td></tr> <tr><td><input type="checkbox" name="checkboxes[]" value="4" /><td>跑步</td></td></tr> </table>
<input type="hidden" id="getvalues" name="getvalues"/> 隐藏域传参数 <button id="batch-delete-btn">批量删除</button>
</form>
</body>
1.问题：怎么单击一个复选框实现全选
js代码实现
<script type="text/javascript">
function selectAll(obj, chk)
{
if (chk == null)
{
chk = 'checkboxes';
}
var elems = obj.form.getElementsByTagName("INPUT");
for (var i=0; i < elems.length; i++)
{
if (elems[i].name == chk || elems[i].name == chk + "[]")
{
elems[i].checked = obj.checked;
}
}
}
</script>
方法二：
function CheckAll()
{
var ele =document.getElementsByTagName('input');
for(var i=0;i<ele.length;i++)
{
if(ele[i].name=='checkbox[]')
{
ele[i].checked=document.getElementById("chkAll").checked;
}
}
}
2.怎么把选中的id通过action传给php进行处理
通过juqery获取所有选中的box的value值，赋给一个变量，同时设置一个隐藏域把变量赋给隐藏域的value,通过POST提交，使得php页面获取所有id值
<script type="text/javascript">
$(function(){
$('#batch-delete-btn').click(function(){
checked = [];
$('input:checkbox:checked').each(function() {
checked.push($(this).val());
});
$('#getvalues').val(checked); 给隐藏域设置属性
})
})
</script>
使用原生js获取
var compatibility = "",
input = document.getElementsByTagName("input"),
value;
for (var i = 0; i < input.length; i++) {
if (input[i].type == "checkbox") {
if (input[i].checked) {
value = input[i].value;
if(value!='on'){
compatibility += value + ",";
}
}
}
}
compatibility = compatibility.substring(0,compatibility.lastIndexOf(",")); 最后所有值拼接成的字符串
document.getElementById('getvalues').value=compatibility; 赋值给隐藏域
问题1.批量删除前判断是否有box选中
function checkbox() {
var checkboxs=document.getElementById('getvalues').value; 如果隐藏域value为空表示没有被选中，return false 组织表单提交跳转，否则再次确定是否删除，确定返回true 表单跳转处理
if(!checkboxs){
alert('请选择要删除的会员');
return false;
}else{
confirm('确定批量删除？');
}
}
为题2.如果直接选择全选按钮选中全部，则在返回的id中 第一个全选按钮返回值为on 所以需要把on 元素删除
on,6039,6038,6037,6036,6035,6034,6033,6032,6031,6030,6029,6027,6026,6025,6024
3.php页面对id元素处理
if(isset($_REQUEST['getvalues'])){ //批量删除会员
$str=$_REQUEST['getvalues']; 返回的为一个字符串，如上
$arrid=explode(',',$str); 拆分字符串，如果为直接全选删除第一个元素
if($arrid[0]=='on'){
array_shift($arrid);
}
foreach($arrid as $v){ 遍历元素直接删除，也可以不便利直接把字符串传进sql语句里 id IN(+'$str'+);
deleteUserById($v);
deleteIdentityApproveByUserId($v);
admin_log('会员信息删除-'.$v, 'edit', 'user');
}
showMsg('删除成功！','member.php?act=add','member.php?act=list');
}
