比较全的JS checkbox全选、取消全选、删除功能代码

 更新时间:2008年12月19日 12:56:43   作者:  
今天把JS控制checkbox全选、取消全选、删除功能的代码贴出来。。
看下面两种实现方法:
JS checkbox 方法一:
复制代码 代码如下:

function checkAll()
{
var code_Values = document.all['code_Value'];
if(code_Values.length){
for(var i=0;i<code_Values.length;i++)
{
code_Values[i].checked = true;
}
}else{
code_Values.checked = true;
}
}
function uncheckAll()
{
var code_Values = document.all['code_Value'];
if(code_Values.length){
for(var i=0;i<code_Values.length;i++)
{
code_Values[i].checked = false;
}
}else{
code_Values.checked = false;
}
}
function multipleDelete()
{
var num = 0;
var code_Values = document.all['code_Value'];
if(code_Values.length){
for(var i=0;i<code_Values.length;i++)
{
if(code_Values[i].checked == true)
{
num ++;
}
}
}else{
if(code_Values.checked == true){
num ++ ;
}
}
if(num == 0){
alert('Please select delete item');
}
if(num >0){
document.BuCodeSearch.action = '<%=EusUtil.getPage("lookup.generic.bucode.delete.s")%>';
document.BuCodeSearch.submit();
}
}
</script>

JS checkbox方法二:
复制代码 代码如下:

function checkAll()
{
var code_Values = document.getElementsByTagName("input");
for(i = 0;i < code_Values.length;i++){
if(code_Values[i].type == "checkbox")
{
code_Values[i].checked = true;
}
}
}
function uncheckAll()
{
var code_Values = document.getElementsByTagName("input");
for(i = 0;i < code_Values.length;i++){
if(code_Values[i].type == "checkbox")
{
code_Values[i].checked = false;
}
}
}
function multipleDelete()
{
if (document.BuCodeSearch.elements["code_Value"])
{
var num = 0;
var fm = document.BuCodeSearch;
if (document.BuCodeSearch.elements["code_Value"])
{
var elm = document.BuCodeSearch.elements["code_Value"];
var ename = "code_Value";
if (elm.length) {
var len = fm.elements[ename].length;
for (var i = 0; i< len; i++) {
var e = fm.elements[ename][i];
if (e.checked == true){
num++;
}
}
} else {
if (elm.checked == true ) {
num++;
}
}
if (num > 0 )
{
document.BuCodeSearch.action = '<%=EusUtil.getPage("lookup.generic.bucode.delete.s")%>';
document.BuCodeSearch.submit();
}
}
}
}

code_Value为checkbox表单的名称,BuCodeSearch为form名称
复制代码 代码如下:

<td align="left" width="20"><input type="checkbox" name="code_Value" value="<%=userDefFieldValueBean.getUdfValue()%>"></td>

相关文章

  • JS实现文字放大效果的方法

    JS实现文字放大效果的方法

    这篇文章主要介绍了JS实现文字放大效果的方法,实例分析了javascript鼠标事件控制css样式的技巧,需要的朋友可以参考下
    2015-03-03
  • uniapp中微信小程序与H5相互跳转以及传参详解(webview)

    uniapp中微信小程序与H5相互跳转以及传参详解(webview)

    在单位做项目的时候碰到一个需求,需要从微信小程序跳转到H5页面,下面这篇文章主要给大家介绍了关于uniapp中微信小程序与H5相互跳转以及传参的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-08-08
  • JavaScript定时器原理详解

    JavaScript定时器原理详解

    这篇文章主要介绍了JavaScript定时器原理,setTimeout()方法用于设置一个定时器,该定时器在定时器到期后执行调用函数,文章围绕JavaScript定时器相关资料展开以下内容,需要的朋友可以参考一下
    2021-12-12
  • javascript canvas封装动态时钟

    javascript canvas封装动态时钟

    这篇文章主要为大家详细介绍了javascript canvas封装动态时钟,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09
  • 原生js实现密码输入框值的显示隐藏

    原生js实现密码输入框值的显示隐藏

    这篇文章主要为大家详细介绍了原生js实现密码输入框值的显示隐藏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • element-ui dialog弹窗增加全屏功能(推荐)

    element-ui dialog弹窗增加全屏功能(推荐)

    这篇文章主要介绍了element-ui dialog弹窗增加全屏功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-11-11
  • 微信小程序tabbar底部导航

    微信小程序tabbar底部导航

    这篇文章主要为大家详细介绍了微信小程序重写tabbar底部导航,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-11-11
  • 问题解析有JSDoc还需要TypeScript吗

    问题解析有JSDoc还需要TypeScript吗

    这篇文章主要介绍了有JSDoc还需要TypeScript的问题示例解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • 在Firefox下js select标签点击无法弹出

    在Firefox下js select标签点击无法弹出

    在Firefox下js select标签点击无法弹出,在IE和CHROME下没有此现象
    2014-03-03
  • vue双向绑定简要分析

    vue双向绑定简要分析

    这篇文章主要介绍了vue双向绑定的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03

最新评论