Question

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

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

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

Answer 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

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

Answer 3

我认为你必须尝试java脚本的show（）和hide（）函数，并且还使用css属性，如display：block和display：hidden for hide和show text box。 @namrata shrivas

Answer 4

试试这个

 $(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();
    });

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

4 个答案: