时间戳

首页 > 解决方案 > 在 html 表格行上选择单选按钮功能

javascript - 在 html 表格行上选择单选按钮功能

问题描述

我编写下面的代码来获取单选按钮值以禁用表格行。但是 getElementById/getElementByName 不起作用。

<!DOCTYPE html>
<html>
<head>
<style>
table, td {
  border: 1px solid black;
}
</style>
</head>
<body>

<table id="myTable">
  <tr>
  <td><input type="radio" name="r1" value ="1" onclick="myFunction()"></td>
    <td>cell 1</td>
    <td>cell 2</td>
  </tr>
  <tr>
  <td><input type="radio"  name="r1" value="2" onclick="myFunction()"></td>
    <td>cell 3</td>
    <td>cell 4</td>
  </tr>
</table>

<script>
function myFunction() {
//alert("Test");
  var x = document.getElementByName("r1").value;
  alert(x);
  if(x ==1 ){
  document.getElementByValue("2").disabled = true;
  } 
}
</script>
</body>
</html>

警报也没有弹出。这里有什么问题吗？我想在这里使用纯 JavaScript 和 html。

标签： javascripthtml

解决方案

你可以试试querySelector

console.log(document.querySelector("[name=r1]"))
console.log(document.querySelector('[value="2"]'))
<table id="myTable">
  <tr>
    <td><input type="radio" name="r1" value="1"></td>
    <td>cell 1</td>
    <td>cell 2</td>
  </tr>
  <tr>
    <td><input type="radio" name="r1" value="2"></td>
    <td>cell 3</td>
    <td>cell 4</td>
  </tr>
</table>

推荐阅读