JavaScript实现复选框全选与选中状态校验
作者:纸飞机时间:2026-10-28 22:47:29浏览:614
本文介绍如何使用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编程有所帮助。
作者最新文章
JS动态构建复杂嵌套JSON对象的方法
2026-11-05 15:41:52
JS负数取余为什么是负数?详解余数与模运算区别
2026-11-05 13:34:41
JS 解压出现乱码或报错怎么解决?
2026-11-05 12:32:38
JS 中 startsWith、indexOf 与正则判断字符串前缀的对比
2026-11-04 22:19:43
JS解析Excel后怎么将数据转换为JSON格式
2026-11-04 20:58:28
