javascript - 在单选按钮上显示/隐藏字段

Question

我的表格上有 2 个单选按钮，分别是现金和支票。当我单击现金时，它应该显示金额字段，当我单击支票时，它应该显示支票号码。和银行名称。

在我的代码中，假设如果我首先单击现金，它会显示金额字段，但如果我单击检查而不刷新页面，它会显示其他字段和金额。如何隐藏该字段而不刷新？请帮忙。谢谢。抱歉语法错误。

HTML 代码:

<div>
        <label id="label">Payment Mode:</label>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="radio" name="mode" value="Cash" id="cash" onClick="check()" >Cash
            <input type="radio" name="mode" value="Cheque" id="cheque" onClick="ccheque()">Cheque
        </div>
        
        
        <div id="amnt">
        </br><label id="label">Amount:</label>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  
            <input id="amount" name="amount" placeholder="--" type="text" />
        </div>
        
        
        <div id="cno">
        </br><label id="label">Cheque No:</label>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input name="cn" id="cn" placeholder="--" type="text" />
    
        </br></br><label id="label">Bank Name:</label>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input name="bn" id="bn" placeholder="--" type="text" />
        </div> 

JavaScript:

function check() {
            if (document.getElementById('cash').checked) {
            document.getElementById('amnt').style.display = 'block';
            }
            else document.getElementById('amnt').style.display = 'none';
        }
        
        function ccheque() {
            if (document.getElementById('cheque').checked) {
            document.getElementById('cno').style.display = 'block';
            }
            else document.getElementById('bnm').style.display = 'none';     
        }

Answer 1

你可以在一个函数中处理这些，我添加了一个名为 paymentCheck 的函数检查是否 cash检查隐藏cno并显示amnt field 。 否则只显示cno并隐藏amnt .

默认情况下也将它们全部隐藏(init)。

注:</br>无效，请使用 <br>或<br/>

引用:

Differences Between HTML and XHTML

In HTML, the <br> tag has no end tag.

In XHTML, the <br> tag must be properly closed, like this: <br />

document.getElementById('amnt').style.display = 'none';
document.getElementById('cno').style.display = 'none';

function paymentCheck() {
  if (document.getElementById('cash').checked) {
    document.getElementById('amnt').style.display = 'block';
    document.getElementById('cno').style.display = 'none'
  } else {
    document.getElementById('amnt').style.display = 'none';
    document.getElementById('cno').style.display = 'block';
  }
}

<div>
  <label id="label">Payment Mode:</label> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <input type="radio" name="mode" value="Cash" id="cash" onClick="paymentCheck()">Cash
  <input type="radio" name="mode" value="Cheque" id="cheque" onClick="paymentCheck()">Cheque
</div>

<div id="amnt">
  <br>
  <label id="label">Amount:</label> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <input id="amount" name="amount" placeholder="--" type="text" />
</div>


<div id="cno">
  <br>
  <label id="label">Cheque No:</label> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <input name="cn" id="cn" placeholder="--" type="text" />

  <br>
  <br>
  <label id="label">Bank Name:</label> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <input name="bn" id="bn" placeholder="--" type="text" />
</div>