JavaScript实现复选框全选与选中状态校验

作者:纸飞机

时间:2026-10-28

浏览:613

本文介绍如何使用JavaScript实现复选框的全选功能,并校验用户是否至少选中一条记录。通过遍历DOM元素设置checked属性实现全选,利用循环检查items数组或单个元素判断选中状态,确保操作前存在有效选择,避免空提交。

文章目录

JavaScript实现复选框全选与选中状态校验

本文详细介绍利用JavaScript实现复选框全选功能,并检测是否存在选中项的具体方法。以下代码供读者参考使用。

具体实现代码如下:

function actionEvent(methodname){
var form = document.forms[0];
if(validateIsSelect(form.all, form.productids)){
form.action='<html:rewrite action="/control/product/manage"/>';
form.submit();
}else{
alert("请选择要操作的记录");
        }  
} 
function allselect(allobj,items){ 
 var state = allobj.checked; 
 if(items.length){ 
 for(var i=0;i<items.length;i++){ 
 if(!items[i].disabled) items[i].checked=state; 
 } 
 }else{ 
 if(!items[i].disabled) items.checked=state; 
 } 
} 
/* 
* 判断是否选择了记录 
*/ 
function validateIsSelect(allobj,items){ 
 var state = allobj.checked; 
 if(items.length){ 
 for(var i=0;i<items.length;i++){ 
 if(items[i].checked) return true; 
 } 
 }else{ 
 if(items.checked) return true; 
 } 
 return false; 
}

HTML部分代码如下:

<INPUT TYPE="checkbox" NAME="all" onclick="javascript:allselect(this, this.form.productids)">全选</td>

按钮触发代码如下:

<input name="visible" type="button" class="frm_btn" onClick="javascript:actionEvent('visible')" value=" 操作 ">

希望上述内容对您的JavaScript编程有所帮助。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章