Как скрыть элементы в зависимости от состояния переключателей с помощью Javascript

Question

Как скрыть элементы в зависимости от состояния переключателей с помощью Javascript

0

У меня есть форма ввода данных на моем сайте, которая содержит несколько флажков, две переключатели и текстовые поля. Я хочу, чтобы текстовое поле отображалось, если выбрано "check" радиокнопок и спрятать это текстовое поле со значением поля "Проверить", если выбрана радиокамера "cash".

Радиокнопки и текстовая область выглядят следующим образом:

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

Namrata Shrivas 20 март 2014, в 09:59

Источник

0

Хорошо, это показывает форму HTML, но вы пометили этот javascript и jquery. Да, вы, вероятно, будете использовать какой-то javascript для решения этой проблемы, но вы на самом деле пробовали что-нибудь?
Fluffeh 20 март 2014, в 08:31
0

как насчет javascript / jquery?
Eddie 20 март 2014, в 08:32
0

Я пробовал JavaScript, чтобы скрыть текстовые поля. Например: если пользователь нажимает кнопку проверки и заполняет все детали, но если пользователь передумает и нажимает кнопку оплаты наличными, то детали чеков должны быть удалены из текстовых полей, как только они скрываются. И если он снова нажмет на чек, то текстовые поля должны быть пустыми. Я надеюсь, вы понимаете мой запрос ..
Namrata Shrivas 20 март 2014, в 08:54

Показать ещё 1 комментарий

Теги:

php

javascript

jquery

html

kendo-ui

4 ответа

1

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

Kashif Umar 20 март 2014, в 07:54

0

полное решение вашей проблемы
Kashif Umar 20 март 2014, в 09:00

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

Демо: скрипка

Arun P Johny 20 март 2014, в 05:52

0

я думаю, вам нужно попробовать show() и hide() функцию java-скрипта, а также использовать свойство Css, например display: block and display: hidden for hide и show text box. @namrata shrivas

user3350576 20 март 2014, в 06:05

Ещё вопросы

Хорошо, это показывает форму HTML, но вы пометили этот javascript и jquery. Да, вы, вероятно, будете использовать какой-то javascript для решения этой проблемы, но вы на самом деле пробовали что-нибудь?
Я пробовал JavaScript, чтобы скрыть текстовые поля. Например: если пользователь нажимает кнопку проверки и заполняет все детали, но если пользователь передумает и нажимает кнопку оплаты наличными, то детали чеков должны быть удалены из текстовых полей, как только они скрываются. И если он снова нажмет на чек, то текстовые поля должны быть пустыми. Я надеюсь, вы понимаете мой запрос ..

Kiranramchandran · Accepted Answer · 2014-03-20T06-53-00.000Z

Попробуй это

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

Спасибо за ваш ценный ответ .. это работает.