获取checkbox复选框的值

最新推荐文章于 2023-03-02 13:44:52 发布

原创最新推荐文章于 2023-03-02 13:44:52 发布 · 371 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#checkbox

web front end 专栏收录该内容

22 篇文章

订阅专栏

本文介绍了一个简单的JavaScript应用，利用CheckBox实现用户数据收集过程。通过按钮触发，程序遍历所有被选中的CheckBox元素，展示用户选择的数据。此应用展示了如何在网页上实现基本的用户交互与数据收集。

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

<title>CheckBox</title>
  <script type = "text/javascript">
	doGetVal: function  doGetVal()
	{
		//var fruitName = document.getElementById("apple").value;//根据ID获取值
		//alert(fruitName);
		//
		var fruit = document.getElementsByName("fruit"); //根据Name拿到集合数组
		for (var i=0;i<fruit.length;i++ )
		{
			if (fruit[i].checked)//checkbox是否选中
			{
				var fruitName = fruit[i].value;
				alert(fruitName);
			}
		}
	}
  </script>
 </head>
 <body>
	<div align="left">
		<input type = "checkBox" id="apple" name="fruit" value="apple"/>apple<br>
		<input type = "checkBox" name="fruit" value="watermelon"/>watermelon<br>
		<input type = "checkBox" name="fruit" value="strawberry"/>strawberry<br>
		<input type = "button" onclick="doGetVal()" value = "click"/>
	</div>
 </body>
</html>