asp下实现全选反选删除 checkbox

asp下实现全选反选删除 checkbox (2012-03-30 20:08:07)转载

通过ASP如何实现全选反选的操作呢,asp页面中用javascript进行checkbox的全选反选的所有操作。
首先请看下面这样一个javascript事件:
function checkAll(obj)
{
for(var i=0;i<document.all.length;i++)
{
if (document.all(i).type=="checkbox")
{
switch(obj)
{
case 1:document.all(i).checked=true;break; //全选
case 2:document.all(i).checked=false;break; //不选
case 3:{if(document.all(i).checked==true){document.all(i).checked=false;}else{document.all(i).checked=true;}}break; //反选
}
}
}
return false;
}
我们可以这样来触发这个事件:<input type="radio" οnclick="checkAll(1)" name="allbox" value="" /> 全选 <input type="radio" οnclick="checkAll(2)" name="allbox" checked="true" value="" /> 全不选 <input type="radio" οnclick="checkAll(3)" name="allbox" value="" /> 反选
我们给obj传值1的时候就是全选,2的时候就是不选,3的时候就是反选,当然我没有做这么复杂,只做了一个反选按钮,没有选的时候反选就是全选,全选的时候反选就是不选,如果你也是这样想的话,就把代码改成这样的:
function checkAll()
{
for(var i=0;i<document.all.length;i++)
{
if (document.all(i).type=="checkbox")
{
if(document.all(i).checked==true)
{document.all(i).checked=false;}
else{document.all(i).checked=true;}
}
}
return false;
}
然后只需要用一个按钮来触发就可以了。<input οnclick="checkAll()" type="button" value="反选">
用这样一个按钮,就可以同时实现上面三个按钮所实现的功能。
代码很简单,document.all就是得到页面中所有的控件,然后逐一判断是不是checkbox,如果是的话判断这个checkbox是否被选中,如果已选中就给置为false,如果没有选中就给置为true就好了。

以前我在asp.net中做这个操作的时候总是把id号一个一个取出来,然后一个一个删除,后来我发现,这样操作要执行多个sql语句,要请求多次sql数据库,这样太浪费资源了,于是就在想能不能用一条sql全解决呢,后来就查到了这个办法,代码如下:
function Delete() //删除
{
var m=0;
flag=false;
var str="";
for(i=0;i<document.all.length;i++)
{
if(document.all(i).type=="checkbox" && document.all(i).checked==true)
{
str+=document.all(i).value+",";
flag=true;
m++;
}
}
if(!flag)
{
alert("你没有选中任何数据");
return false ;
}
if(confirm('您确定要删除以上'+m+'条信息吗?'))
{
location.href="?action=del&idlist="+str;
}
else
{
return false;
}
}
当点击删除按钮的时候执行这个javascript事件,然后把所有的id号用逗号分隔存在一个字符串idlist里再用get方式传给本页面,然后在页面接收到这个请求的时候把字符串用split分隔成数组,拼成类似 delete from information where id=1 or id=2 or id=3 这样的语句,无限的拼下去,然后一次性执行,这样就可以一下解决了。
在uni-app中,可以使用van-checkbox-group组件实现全选反选和单选的功能。首先,你需要在data中定义一个数组来存储checkbox的选中状态: ```javascript data() { return { checkboxOptions: [ { value: 'option1', text: '选项1', checked: false }, { value: 'option2', text: '选项2', checked: false }, { value: 'option3', text: '选项3', checked: false } ], isCheckedAll: false }; } ``` 然后,在模板中使用van-checkbox-group和van-checkbox组件来展示和操作checkbox: ```html <template> <van-checkbox-group v-model="checkboxOptions"> <van-checkbox v-for="(option, index) in checkboxOptions" :key="index" :name="option.value" @change="onChange"> {{ option.text }} </van-checkbox> </van-checkbox-group> </template> ``` 其中,v-model绑定checkboxOptions数组,使得checkbox的选中状态与数组中的checked属性关联起来。@change事件监听checkbox的变化,通过onChange方法来更新全选按钮的状态: ```javascript methods: { onChange() { this.isCheckedAll = this.checkboxOptions.every(option => option.checked); }, toggleCheckAll() { this.isCheckedAll = !this.isCheckedAll; this.checkboxOptions.forEach(option => { option.checked = this.isCheckedAll; }); } } ``` toggleCheckAll方法用于切换全选按钮的状态,并更新checkboxOptions数组中的每个选项的checked属性。 最后,在模板中添加全选按钮和反选按钮: ```html <template> <div> <van-checkbox v-model="isCheckedAll" @change="toggleCheckAll"> 全选 </van-checkbox> <van-checkbox @change="onChange"> 反选 </van-checkbox> </div> </template> ``` 现在,你可以通过点击全选按钮、反选按钮或每个单选按钮来实现全选反选和单选功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值