JavaScript检查复选框选中的值个数及值

最新推荐文章于 2023-11-10 11:02:28 发布

最新推荐文章于 2023-11-10 11:02:28 发布 · 157 阅读

文章标签：

#javascript #ViewUI

本文介绍了一段使用JavaScript实现的代码，该代码能够在网页上创建一组复选框，并提供了全选与删除所选复选框的功能。用户可以通过点击全选按钮来选择所有复选框，或者通过点击删除按钮来移除已选中的复选框。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>JavaScript检查复选框选中的值个数及值</title> </head> <body> <script language="javascript"> var i = 0; for (;i<20;i++) { document.write('<input type="checkbox" name="ck" value="'+i+'" /><br />'); } document.write('<br /><input type="button" id="ckall" name="ckall" value="全选" onclick="checkall();" /> <input type="button" name="delall" value="删除所选" id="delall" />'); document.write('<br /><label id="text" style="display:none;"></label>'); // 是否全选复选框函数 function checkall() { var ckall = document.getElementById("ckall"); // 全选按钮对象 var ck = document.getElementsByName("ck"); // 复选框对象 // 当要执行全选时 if (ckall.value=="全选") { var j = 0; // 循环把复选框选中 for (;j<20;j++) { ck[j].checked = "true"; } ckall.value="全不选"; } else if (ckall.value=="全不选") { // 当要执行全选时 document.getElementById("delall").disabled=false; // 去掉delall按钮的disabled document.getElementById("delall").value="删除所选"; // 修改elall按钮的value为“删除所选” document.getElementById("text").style.display="none"; // 设置 text 为隐藏 // 循环设置全不选 for (j=0;j<20;j++) { ck[j].checked = null; } ckall.value="全选"; } } var delall = document.getElementById("delall"); // 点击删除按钮执行下面函数 delall.onclick=function(){ var arr = Array(); // arr为数组 var ck = document.getElementsByName("ck"); for (i=0;i<20;i++) { if (ck[i].checked) { arr.push(ck[i].value); // 当复选框选中中将选中的值累加到arr这个数组中 } } // 判断arr数组的个数，如果为0，那么就是没有选中，弹出警告信息 if (arr.length==0) { alert('请先选中数据！'); } else if (arr.length>0){ // 下面是执行删除动作 delall.disabled=true; // 设置delall按钮为不可点 delall.value="正在删除..."; // 设置delall按钮的value为“正在删除...” var text = document.getElementById("text"); text.style.display="block"; // 显示 text text.style.fontSize = '12px'; // 设置字体大小 var t = "删除数据为："; // t 为text要显示的内容 for (j=0;j<arr.length;j++) { t += arr[j]+""; } text.innerHTML = t; } } </script> </body> </html>