我正在尝试根据使用HTML中的单选按钮进行的选择来显示/隐藏div。
HTML代码：
<input value="cheque" type="radio" name="selector" onClick="displayForm(this)"></input>Cash
<input value="cheque" type="radio" name="selector" onClick="displayForm(this)"></input>Cheque
<div id="chequeContainer" class = "chequeContainer" style="display:none;">
<tr>
<td>Bank Name:</td><td><input type = "text" name = "bank"></td>
<td>Branch:</td><td><input type = "text" name = "branch"></td>
<td>Cheque No:</td><td><input type = "text" name = "chequeno"></td>
</div>
Javascript代码：
function displayForm(c) {
alert(c.value);
if (c.value == "cheque") {
document.getElementById("chequeContainer").style.display = 'inline';
}
else if (c.value == "cash") {
document.getElementById("chequeContainer").style.display = 'none';
}
else {}
}
答案 0 :(得分：2)
嗨，你在元素值中犯了一个拼写错误。您没有为输入字段值提供不同的值，而是为两个单选按钮提供了 value =“check”。我希望这会对你有所帮助。
function displayForm(c) {
if (c.value == 'cheque') {
document.getElementById("chequeContainer").style.display = 'inline';
}
else {
document.getElementById("chequeContainer").style.display = 'none';
}
}<input value="cash" type="radio" name="selector" onClick="displayForm(this)"></input>Cash
<input value="cheque" type="radio" name="selector" onClick="displayForm(this)"></input>Cheque
<div id="chequeContainer" class = "chequeContainer" style="display:none;">
<tr>
<td>Bank Name:</td><td><input type = "text" name = "bank"></td>
<td>Branch:</td><td><input type = "text" name = "branch"></td>
<td>Cheque No:</td><td><input type = "text" name = "chequeno"></td>
</div>
答案 1 :(得分：1)
两个具有相同值的输入标记：
<input value="cheque" type="radio" name="selector" onClick="displayForm(this)"></input>Cash
<input value="cheque" type="radio" name="selector" onClick="displayForm(this)"></input>Cheque
更改如下：
<input value="cash" type="radio" name="selector" onClick="displayForm(this)"></input>Cash
<input value="cheque" type="radio" name="selector" onClick="displayForm(this)"></input>Cheque
它应该工作愉快
完整代码：
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<input value="cash" type="radio" name="selector" onClick="displayForm(this)">
</input>Cash
<input value="cheque" type="radio" name="selector" onClick="displayForm(this)">
</input>Cheque
<div id="chequeContainer" class = "chequeContainer" style="display:none;">
<tr>
<td>Bank Name:
</td>
<td>
<input type = "text" name = "bank">
</td>
<td>Branch:
</td>
<td>
<input type = "text" name = "branch">
</td>
<td>Cheque No:
</td>
<td>
<input type = "text" name = "chequeno">
</td>
</div>
<script>
function displayForm(c) {
if (c.value == "cheque") {
document.getElementById("chequeContainer").style.display = 'inline';
}
else if (c.value == "cash") {
document.getElementById("chequeContainer").style.display = 'none';
}
else {}
}
</script>
</body>
</html>
答案 2 :(得分：0)
$(document).ready(function () {
$('input:radio[name="selector"]').change(function () {
if ($(this).val() == 'cheque') {
document.getElementById("chequeContainer").style.display = 'inline';
}
else if ($(this).val() == "cash") {
document.getElementById("chequeContainer").style.display = 'none';
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="radio" name="selector" value="cheque" /> Cheque<br>
<input value="cash" type="radio" name="selector" />Cash<br><br>
<div id="chequeContainer" class="chequeContainer" style="display: none;">
<table>
<tr>
<td>
Bank Name:
</td>
<td>
<input type="text" name="bank">
</td>
<td>
Branch:
</td>
<td>
<input type="text" name="branch">
</td>
<td>
Cheque No:
</td>
<td>
<input type="text" name="chequeno">
</td>
</tr>
</table>
</div>
</div>
答案 3 :(得分：0)
您甚至可以在不使用javascript的情况下执行此操作。
#cheque:not(:checked)~#chequeContainer {
display: none;
}
#cheque:checked~#chequeContainer {
display: inline;
}<input id="cash" value="cash" type="radio" name="selector">
<label for="cash">Cash</label>
<input id="cheque" value="cheque" type="radio" name="selector">
<label for="cheque">Cheque</label>
<div id="chequeContainer" class="chequeContainer">
<tr>
<td>Bank Name:</td>
<td><input type="text" name="bank"></td>
<td>Branch:</td>
<td><input type="text" name="branch"></td>
<td>Cheque No:</td>
<td><input type="text" name="chequeno"></td>
</tr>
</div>
答案 4 :(得分：0)
Tyr this
<input value="cheque" type="radio" name="selector" onClick="displayForm(this.value)"/>Cash
<input value="cash" type="radio" name="selector" onClick="displayForm(this.value)"/>Cheque
<div id="chequeContainer" class="chequeContainer" style="display:none;">
<tr>
<td>Bank Name:</td>
<td><input type="text" name="bank"></td>
<td>Branch:</td>
<td><input type="text" name="branch"></td>
<td>Cheque No:</td>
<td><input type="text" name="chequeno"></td>
</tr>
</div>
的javascript：
function displayForm(val) {
alert(val);
if (val == "cheque") {
document.getElementById("chequeContainer").style.display = 'inline';
}
else if (val == "cash") {
document.getElementById("chequeContainer").style.display = 'none';
}
else { }
}
答案 5 :(得分：0)
<input value="cash" type="radio" name="selector" onClick="displayForm(1)"></input>Cash
<input value="cheque" type="radio" name="selector" onClick="displayForm(2)"></input>Cheque
function displayForm(val) {
if (val == "2" || val == 2) {
document.getElementById("chequeContainer").style.display = 'inline';
}
else {
document.getElementById("chequeContainer").style.display = 'none';
}
}