我试图根据使用html中的单选按钮进行的选择来显示/隐藏div
[英]I am trying to show/hide a div based on the selection made using a radio button in html
问题描述
我试图根据使用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 {}
}
6 个解决方案
解决方案1
2 2018-04-11 04:53:13
嗨，你在元素值中犯了一个拼写错误。 您没有为输入字段值提供不同的值，而是为两个单选按钮赋予了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>
解决方案2
1 2018-04-11 05:01:30
两个具有相同值的输入标记：
<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>
解决方案3
0 2018-04-11 04:59:48
$(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>
解决方案4
0 2018-04-11 05:05:31
你甚至可以不使用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>
解决方案5
0 2018-04-11 05:10:40
Tyr这个
<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 { }
}
解决方案6
0 2018-04-11 13:15:47
<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';
}
}
使用javascript根据html中的下拉选择显示和隐藏div元素
[英]Show and hide div elements based on dropdown selection in html using javascript
如何根据selecctbox中的选择对div进行分类，隐藏和显示？
[英]How to sort, hide and show div's based on selection made in selecctbox?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.