如何使用 Javascript 根据单选按钮的状态隐藏元素答案

【问题标题】：How to hide elements depending on the state of radio buttons with Javascript如何使用 Javascript 根据单选按钮的状态隐藏元素
【发布时间】：2014-03-20 08:28:45
【问题描述】：

我的网站上有一个数据输入表单，其中包含多个复选框、两个单选按钮和一个文本字段。如果选择了“支票”单选按钮，我想让文本字段显示，如果选择了“现金”单选按钮，则隐藏带有检查文本框值的文本框。

单选按钮和文本区域如下：

    <tr>
        <td valign="top" width="300">Balance Amount:</td>
        <td valign="top" width="300" align="left">
             <input  type="number" class="k-textbox" name="balance_amount" id="balance_amount" placeholder=""  size="30" value=" <?php echo $balance_amount; ?>" readonly ></input>
        </td>

    </tr>
    <tr>
        <td valign="top" width="300">Mode Of Payement :</td>
        <td valign="top" width="300" align="left">
         Cheque :<input type="radio" name="mode_of_payment" id="cheq" value="1" >

        Cash :<input type="radio" name="mode_of_payment" id="cash" value="2" checked >
        </td>
    </tr>
    <tr id="bankName">
        <td valign="top" width="300">Bank Name :</td>
        <td valign="top" width="300" align="left">
            <input  type="text" class="k-textbox" name="bank_name" id="bank_name" placeholder=""/>
        </td>
    </tr>
    <tr id="branch">
        <td valign="top" width="300">Branch :</td>
        <td valign="top" width="300" align="left">
            <input  type="text" class="k-textbox" name="branch_name" id="branch_name" placeholder="" />
        </td>
    </tr>
    <tr id="Acc_No">
        <td valign="top" width="300">Account No :</td>
        <td valign="top" width="300" align="left">
            <input  type="text" class="k-textbox"  name="account_no" id="account_no" placeholder="" />
        </td>
    </tr>
    <tr id="chq_no">

        <td valign="top" width="300">Cheque No</td>
        <td valign="top" width="300" align="left">
          <input type="number" id="cheque_number" name="cheque_number" class="k-textbox" placeholder="Enter Cheque No" /></td>
    </tr>
    <tr id="chq_date">

        <td valign="top" width="300">Cheque Date</td>
        <td valign="top" width="300" align="left">
            <input id="cheque_date" name="cheque_date" value="<?php echo $cheque_date; ?>"  type="text" ></input></td>
    </tr>
    <tr id="pay_at">

        <td valign="top" width="300">Payable At</td>
        <td valign="top" width="300" align="left">
            <input id="payable_at" name="payable_at"  class="k-textbox" type="text" ></input></td>
    </tr>
    <tr>

        <td valign="top" width="300">Paid Amount</td>
        <td valign="top" width="300" align="left">
          <input type="number" id="paid_amount" name="paid_amount" class="k-textbox" placeholder="Enter Digit" required validationMessage="Please Enter the Amount"/></td>
    </tr>
    <tr>

        <td valign="top" width="300">Amount In Words</td>
        <td valign="top" width="300" align="left">
          <input type="number" id="amount_in_words" name="amount_in_words" class="k-textbox" placeholder="Enter Words" required validationMessage="Please Enter Amount In Words"/></td>
    </tr>

【问题讨论】：

好的，这显示了 HTML 表单，但是你已经标记了这个 javascript 和 jquery。是的，你可能会使用一些 javascript 来解决这个问题，但你真的尝试过吗？
javascript/jquery怎么样？
我已经尝试使用 javascript 来隐藏文本框。例如：如果用户单击检查按钮并填写所有详细信息，但如果用户改变主意并单击现金按钮，则检查的详细信息应从文本框一旦隐藏。如果他再次点击检查，那么文本框应该是空白的。我希望你能理解我的查询..

标签： javascript php jquery html kendo-ui

【解决方案1】：

尝试单选按钮的更改处理程序。

还添加一个类cheque 到检查特定行，如

<tr id="chq_no" class="cheque">

    <td valign="top" width="300">Cheque No</td>
    <td valign="top" width="300" align="left">
        <input type="number" id="cheque_number" name="cheque_number" class="k-textbox" placeholder="Enter Cheque No" /></td>
</tr>
<tr id="chq_date" class="cheque">

    <td valign="top" width="300">Cheque Date</td>
    <td valign="top" width="300" align="left">
        <input id="cheque_date" name="cheque_date" value="<?php echo $cheque_date; ?>"  type="text" ></input></td>
</tr>

然后

jQuery(function(){
    $('input[name="mode_of_payment"]').change(function(){
        $('.cheque').toggle(this.checked && this.value==1)
    }).change()
})

演示：Fiddle

【讨论】：

【解决方案2】：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="jquery-1.11.0.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function(e) {

    $("#chq_no").hide();
    $("#chq_date").hide();          

    $(":radio").click(function(e) {


        switch($(this).val()){

            case "1":
                $("#chq_no").show();
                $("#chq_date").show();
            break;

            case "2":
                $("#chq_no").hide();
                $("#chq_date").hide();          
            break;
        }
    });
});
</script>
</head>

<body>
<table>
<tr>
        <td valign="top" width="300">Balance Amount:</td>
        <td valign="top" width="300" align="left">
             <input  type="number" class="k-textbox" name="balance_amount" id="balance_amount" placeholder=""  size="30" value=" <?php echo $balance_amount; ?>" readonly ></input>
        </td>

    </tr>
    <tr>
        <td valign="top" width="300">Mode Of Payement :</td>
        <td valign="top" width="300" align="left">
         Cheque :<input type="radio" name="mode_of_payment" id="cheq" value="1" >

        Cash :<input type="radio" name="mode_of_payment" id="cash" value="2" checked >
        </td>
    </tr>
    <tr id="bankName">
        <td valign="top" width="300">Bank Name :</td>
        <td valign="top" width="300" align="left">
            <input  type="text" class="k-textbox" name="bank_name" id="bank_name" placeholder=""/>
        </td>
    </tr>
    <tr id="branch">
        <td valign="top" width="300">Branch :</td>
        <td valign="top" width="300" align="left">
            <input  type="text" class="k-textbox" name="branch_name" id="branch_name" placeholder="" />
        </td>
    </tr>
    <tr id="Acc_No">
        <td valign="top" width="300">Account No :</td>
        <td valign="top" width="300" align="left">
            <input  type="text" class="k-textbox"  name="account_no" id="account_no" placeholder="" />
        </td>
    </tr>
    <tr id="chq_no">

        <td valign="top" width="300">Cheque No</td>
        <td valign="top" width="300" align="left">
          <input type="number" id="cheque_number" name="cheque_number" class="k-textbox" placeholder="Enter Cheque No" /></td>
    </tr>
    <tr id="chq_date">

        <td valign="top" width="300">Cheque Date</td>
        <td valign="top" width="300" align="left">
            <input id="cheque_date" name="cheque_date" value="<?php echo $cheque_date; ?>"  type="text" ></input></td>
    </tr>
    <tr id="pay_at">

        <td valign="top" width="300">Payable At</td>
        <td valign="top" width="300" align="left">
            <input id="payable_at" name="payable_at"  class="k-textbox" type="text" ></input></td>
    </tr>
    <tr>

        <td valign="top" width="300">Paid Amount</td>
        <td valign="top" width="300" align="left">
          <input type="number" id="paid_amount" name="paid_amount" class="k-textbox" placeholder="Enter Digit" required validationMessage="Please Enter the Amount"/></td>
    </tr>
    <tr>

        <td valign="top" width="300">Amount In Words</td>
        <td valign="top" width="300" align="left">
          <input type="number" id="amount_in_words" name="amount_in_words" class="k-textbox" placeholder="Enter Words" required validationMessage="Please Enter Amount In Words"/></td>
    </tr>
</table>
</body>
</html>

【讨论】：

您的问题的完整解决方案

【解决方案3】：

试试这个

 $(document).ready(function () {
        $('input[name=mode_of_payment]').change(function () {
            $('#chq_no').toggle(this.checked && this.value == 1);
            $('#chq_date').toggle(this.checked && this.value == 1);
        }).change();
    });

【讨论】：

【解决方案4】：

我认为您必须尝试 java 脚本的 show() 和 hide() 函数，还可以使用诸如 display:block 和 display:hidden 之类的 Css 属性来隐藏和显示文本框。 @namrata shrivas

【讨论】：