jquery-基于所选单选按钮显示隐藏字段_Jquery_Jquery Selectors

jquery-基于所选单选按钮显示隐藏字段

jquery

jquery-基于所选单选按钮显示隐藏字段,jquery,jquery-selectors,Jquery,Jquery Selectors,我有几个radio inut字段，它们有特定的值，选中后，我想显示一个输入字段，因此我的代码是： <label for="adult">Adult</label> <input type="radio" name="type" value="45" /> <label>Number</label><input type="text" id="dob" />

我有几个radio 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

字段。我需要这是隐藏和显示，只有当选定的收音机被选中

我最大的问题是，两者的

值相同（这是基于相同的价格）
如何针对每个特定收音机显示D.O.B
字段？我可以为每个类添加一个类/id并以这种方式将它们作为目标吗
谢谢

$（文件）。准备好了吗(
函数（）
{
$（“输入”）。单击(
函数（）
{
$（this.next（）.next（）.attr（'value'，$（this.attr（'value'））；
});
});
成人
数
学生
离岸价
小孩
离岸价
添加标记类ESL。class=“studentVisible”和class=“childVisible”
首先：id应该是唯一的（多个id=“dob”
是坏的）
回答您的问题：为每个输入显示/隐藏一个类（此处：dob
）和每个单选按钮（其中有一个dob字段）和另一个单选按钮（此处：show\u 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" />


$（函数（）{
$（'input.dob'）.hide（）；//首先隐藏所有
$（'input[type=“radio”]”）。单击（函数（）{
$（'input.dob'）.hide（）；//单击时全部隐藏
if（$（this）.hasClass（'show_dob'））{//仅当单选按钮具有dob字段时
$（this）.nextAll（'input.dob:first'）.show（）；//只显示以下第一个
}
});
});
成人
数
学生
离岸价
小孩
离岸价

$（文件）。准备好了吗(
函数（）
{
$（“输入”）。单击(
函数（）
{
$（“[id$='dob']”）.attr（'value'，$（this.attr（'value'））；
});
});
成人
数
学生
离岸价
小孩
离岸价





仅显示一个文本框，按单击查看：
您需要更改您的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"/>

如果不起作用，请评论我。
你说得对……按类访问它们，选择单选按钮时不显示/隐藏输入。如果我将表单元素放在表格中，即：AdultNumber，当我将其移动到表格中时，它似乎不起作用。当我选择任何一个单选按钮时，它似乎只显示/隐藏第一个
dob`字段2dobfieldstack查看并学习一些示例，您将学会自己解决此类问题。如果您再次陷入困境，请尝试并提出新问题，但您将能够自己解决您的评论。
<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>

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

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