复选框全选及传值

最新推荐文章于 2023-07-28 14:15:28 发布

原创最新推荐文章于 2023-07-28 14:15:28 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

Web编程Javascript 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了如何在网页中实现多选按钮的全选功能，并通过JavaScript监听全选按钮状态变化，实现实时更新选中项的功能。通过事件监听和DOM操作，实现了用户友好、高效的网页交互体验。

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>

<body>
<input type="checkbox" name="m" value="1">
<input type="checkbox" name="m" value="2">
<input type="checkbox" name="m" value="3">
<input type="checkbox" name="m" value="4">
<input type="checkbox" name="m" value="5">
<input type="checkbox" name="m" value="6">
<input type="checkbox" name="m" value="8">
<input type="checkbox" name="m" value="9">
全选<input type=checkbox value="Check All" onclick="mm(this)">
<input type="button" value="提交值" onclick="getpost()" />
<script language=javascript>
function mm(o)
{
  var a = document.getElementsByName("m");
  for (var i=0; i<a.length; i++){
   a[i].checked = o.checked;
  }
}
function getpost(){
  var checkValues = document.getElementsByName("m");
  var jsMxxh = "";
  for (var i = 0; i < checkValues.length; i = i + 1) {
    if (checkValues[i].checked) {
     jsMxxh += checkValues[i].value + ",";
    }
  }
  alert(jsMxxh);
}
</script>
</body>
</html>