在单选按钮

Question

我的表格上有两个单选按钮，现金和支票。当我点击现金它应该显示金额字段，当我点击检查它应显示检查号。和银行名称。在我的代码中假设我首先点击现金它显示金额字段，但如果我点击检查没有刷新页面它显示其他字段和金额。如何在不刷新的情况下隐藏该字段？请帮忙。谢谢。请学习语法。

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

检查出来：

＆＃13;

＆＃13;

    <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="check()">Cheque
            </div>


            <div id="amnt" style="display:none">
            </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" style="display:none">
            </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> 

＆＃13;

File.open('sample.txt').grep(/class\\234ha/) { |line| line.split.first }
 => ["id", "dept"]

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

默认情况下，全部隐藏它们（init）。

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

价：

  

HTML和XHTML之间的差异

     

在HTML中，<br>标记没有结束标记。

     

在XHTML中，<br>标记必须正确关闭，如下所示：<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>

Answer 3

＆＃13;

＆＃13;

function check(self) {
  var elem = self.getAttribute("data-table");
  var toelem = (elem=="cno"?"amnt":"cno");
  if (self.checked) {
    document.getElementById(elem).style.display = 'table';
    document.getElementById(toelem).style.display = 'none';
  }
}

＆＃13;

.select{
  background: red;
}
.table{
  width: 100%;
  display: table;
  table-layout: fixed;
  background: orange;
}
.select label,
.select input{
  display: table-cell;
}
.select > div{
  display: none;
}

＆＃13;

<div>
  <label id="label">Payment Mode:</label>
  <input type="radio" name="mode" value="Cash" id="cash" onClick="check(this)" data-table="amnt">Cash
  <input type="radio" name="mode" value="Cheque" id="cheque" onClick="check(this)" data-table="cno">Cheque
</div>
<div class="select">
<div id="amnt" class="table">
  <label id="label">Amount:</label>
  <input id="amount" name="amount" placeholder="--" type="text" />
</div>
<div id="cno" class="cno">
  <div class="table">
    <label id="label">Cheque No:</label>
    <input name="cn" id="cn" placeholder="--" type="text" />
  </div>
  <div class="table">
    <label id="label">Bank Name:</label>
    <input name="bn" id="bn" placeholder="--" type="text" />
  </div>
</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

这里有一个使用切换的答案：

＆＃13;

＆＃13;

$(function(){
	$("input[name=mode]").on('click', function(){
   $("#cno").toggle($("#cheque").is(":checked"))
  })
})

＆＃13;

#cno{
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
        <label id="label">Payment Mode:</label>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="radio" name="mode" value="Cash" id="cash" checked  >Cash
            <input type="radio" name="mode" value="Cheque" id="cheque" >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> 

＆＃13;

＆＃13;

＆＃13;