我正在尝试根据使用 html 中的单选按钮所做的选择来显示/隐藏 div

我正在尝试根据在HTML中使用单选按钮所做的选择来显示/隐藏div。

网页代码：

<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 {}
}

嗨，

您在元素值中犯了一个错别字错误。您没有为输入字段提供不同的值，而是为两个单选按钮指定了 value="checkque"。我希望这对你有帮助。

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>

两个具有相同值的输入标签：

<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>

    $(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>

你甚至可以在不使用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>

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 { }
        }

<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';
    }
}

相关内容

最新更新

热门标签：