我编写下面的代码来获取单选按钮值以禁用表行。但是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。
您可以尝试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>您可以使用checked属性来获取值，然后相应地应用逻辑。
function myFunction(e) {
document.querySelectorAll('tr').forEach(e => e.classList.remove('disabled'));
let tr = e.parentElement.parentElement;
if (e.checked)
tr.classList.add('disabled');
else
tr.classList.remove('disabled');
}table,
td {
border: 1px solid black;
}
.disabled {
background: #ccc;
}<table id="myTable">
<tr>
<td><input type="radio" name="r1" value="1" onchange="myFunction(this)"></td>
<td>cell 1</td>
<td>cell 2</td>
</tr>
<tr>
<td><input type="radio" name="r1" value="2" onchange="myFunction(this)"></td>
<td>cell 3</td>
<td>cell 4</td>
</tr>
</table>