javascript遍历表格单元里各种控件

最新推荐文章于 2022-08-12 16:14:49 发布

原创最新推荐文章于 2022-08-12 16:14:49 发布 · 3.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #input #xhtml #html #button #function

JavaScript 专栏收录该内容

37 篇文章

订阅专栏

本文介绍了一种使用JavaScript遍历HTML表格中的CheckBox控件的方法，并通过示例代码展示了如何获取这些控件的类型和值。该方法适用于需要对表格内特定类型的输入元素进行操作的场景。

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

项目里边用到了用JavaScript遍历一个表格里全部的CheckBox控件，并且判断是否已经选中的功能并取其选中值的功能，从网上找到了如下代码：

<!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>
<script language=javascript>
function BianLi()
{
var oo = document.getElementById("tb").getElementsByTagName("input");
for(var k = 0, len = oo.length; k < len; k++)
{
  var t = oo[k].type;
  if(t=="text" || t=="radio")
  alert("类型："+t+"/t值："+oo[k].value);
}
}
</script>
<table id="tb">
<tr>
    <td><input type="text" value="**1"/></td>
    <td><input type="radio" name="1" value="11"/>
      a</td>
    <td></td>
    <td><input type="radio" name="1" value="13"/>
      c</td>
<tr>
<tr>
    <td><input type="text" value="**2"/></td>
    <td><input type="radio" name="1" value="12"/>
      a</td>
    <td><input type="radio" name="1" value="22"/>
      b</td>
    <td></td>
<tr>
    
<tr>
    <td><input type="text" value="**3"/></td>
    <td colspan='3'><input type="radio" name="1" value="31"/>
      a</td>
<tr>
</table>
<input type="button" value="遍历" onclick="BianLi()"/>
<label></label>
</body></html>