jquery - отображение скрытых полей на основе выбранной радиокнопки - PullRequest
Новая
       4

jquery - отображение скрытых полей на основе выбранной радиокнопки

0 голосов
/ 04 мая 2011

У меня есть несколько полей для радиовхода, которые имеют определенные значения, и при выборе я хотел бы показать поле ввода, поэтому мой код: 

        <label for="adult">Adult</label>
        <input type="radio" name="type" value="45" />
        <label>Number</label><input type="text" id="dob"  />

        <label for="adult">Student</label>
        <input type="radio" name="type" value="5" />
        <label>D.O.B</label><input type="text" id="dob"  />

        <label for="adult">Child</label>
        <input type="radio" name="type" value="5" />
        <label>D.O.B</label><input type="text" id="dob"  />

Вы можете видеть как Student и кнопка Child имеют поле D.O.B.Мне нужно, чтобы это было скрыто и отображалось только в том случае, если выбрано выбранное радио.

Моя самая большая проблема в том, что оба имеют одинаковое value (это основано на цене, которая одинакова).

Как мне настроить таргетинг на каждое конкретное радио для отображения поля D.O.B?Могу ли я добавить класс / идентификатор для каждого и нацелить их таким образом?

Спасибо

Ответы [ 5 ]

1 голос
/ 04 мая 2011 
   <script>
       $(document).ready(
       function()
       {
           $('input').click(
           function()
           {
               $(this).next().next().attr('value', $(this).attr('value'));
           });
       });
</script>

</head>
<body style="font-size: 62.5%;">
    <label for="adult">Adult</label>
        <input type="radio" name="type" value="45" />
        <label>Number</label><input type="text" id="dob"  />

        <label for="adult">Student</label>
        <input type="radio" name="type" value="5" />
        <label>D.O.B</label><input type="text" id="dob"  />

        <label for="adult">Child</label>
        <input type="radio" name="type" value="5" />
        <label>D.O.B</label><input type="text" id="dob"  />
</body>
0 голосов
/ 04 мая 2011

Проверьте это:

Вам необходимо изменить структуру HTML:

HTML 

        <label for="adult">Adult</label>
        <input type="radio" name="type" value="45" />
        <label class="lhidden">Number</label><input type="text" class="dob ihidden"/>

        <label for="adult">Student</label>
        <input type="radio" name="type" value="5" />
        <label class="lhidden">D.O.B</label><input type="text" class="dob ihidden"/>

        <label for="adult">Child</label>
        <input type="radio" name="type" value="5" />
        <label class="lhidden">D.O.B</label><input type="text" class="dob ihidden"/>

Jquery 

$(function() {
    $('.ihidden,.lhidden').hide();
    $('input[type="radip"]').attr('checked', '');
    $('input[type="radio"]').click(function() {
        $('input[type="radio"]:visible').attr('checked', '');
        $('.ihidden:visible, .lhidden:visible').hide();
        $(this).attr('checked', 'checked').next().show().next().show();
    });
});

Если не работает, пожалуйста, прокомментируйте меня.

0 голосов
/ 04 мая 2011 
<script>
        $(document).ready(
       function()
       {
           $('input').click(
           function()
           {
               $("[id$='dob']").attr('value', $(this).attr('value'));
           });
       });
</script>

</head>
<body style="font-size: 62.5%;">
    <label for="adult">Adult</label>
        <input type="radio" name="type" value="45" />
        <label>Number</label>

        <label for="adult">Student</label>
        <input type="radio" name="type" value="5" />
        <label>D.O.B</label>

        <label for="adult">Child</label>
        <input type="radio" name="type" value="5" />
        <label>D.O.B</label>
        <br />
        <br />
        <input type="text" id="dob"  />
</body>

Только одно текстовое поле, отображаемое в соответствии с кликом

0 голосов
/ 04 мая 2011

Первое: идентификаторы должны быть уникальными (несколько id="dob" плохие)

Чтобы ответить на ваш вопрос: Дайте каждому вводу показать / скрыть класс (здесь: dob) и каждый переключатель, которыйимеет еще одно доб-поле (здесь: show_dob).Тогда вы можете сделать: 

<script type="text/js">
$( function() {

    $('input.dob').hide(); // hide all first
    $('input[type="radio"]').click( function() {
        $('input.dob').hide(); // hide all on click
        if( $(this).hasClass('show_dob') ) { // only if the radio button has a dob-field
            $(this).nextAll('input.dob:first').show(); // show only the following first
        }
    });

});
</script>

    <label for="adult">Adult</label>
    <input type="radio" name="type" value="45" />
    <label>Number</label><input type="text" />

    <label for="adult">Student</label>
    <input class="show_dob" type="radio" name="type" value="5" />
    <label>D.O.B</label><input class="dob" type="text" />

    <label for="adult">Child</label>
    <input class="show_dob" type="radio" name="type" value="5" />
    <label>D.O.B</label><input class="dob" type="text" />
0 голосов
/ 04 мая 2011

Добавить маркер классов. class = «studentVisible» и class = «childVisible»

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...