Question

我有几个无线电inut字段，它们有特定的值，当我选择时，我想显示一个输入字段，所以我的代码是：

        <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字段？我可以为每个人添加一个类/ id并以这种方式定位它们吗？

由于

Answer 1

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

Answer 2

添加标记类别1。 class =“studentVisible”和class =“childVisible”

Answer 3

首先：ID应该是唯一的（多个id="dob"是坏的）

回答你的问题：给每个输入显示/隐藏一个类（这里：dob）和每个单选按钮，其中有一个dob-field另一个（这里：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" />

Answer 4

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

只有一个文本框按点击显示

Answer 5

检查出来：

你需要改变你的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();
    });
});

如果不行，请评论我。

jquery - 根据选定的单选按钮显示隐藏字段

5 个答案: