1

已经搜索了谷歌和堆积溢出并找到了一些很好的建议，但是无论我尝试什么都不能正常工作。基本上，如果无线电组设置为“是”，我会尝试显示和隐藏 div。

我曾尝试使用类来实现这一点，但我根本无法让它工作，尽管我相信我误解了这个概念。

值得注意的是，我们也需要它的多个实例才能工作:)

To sum up, i need 2 radio buttons for yes and no, when yes is selected, the next direct div with a class of extra-field needs to display and then hide again if the radio button is selected to no. 我相信需要使用 $(this) 来查找下一个 .extra-field 以仅显示

为了方便，我创建了一个 jsFiddle - http://jsfiddle.net/andyjh07/GmYjd/并粘贴了以下代码：

HTML -

    <label class="label2">Do you have a 2nd Occupation?</label>
<input class="checkme" type="radio" name="22. Do you have 2nd Occupation" value="Yes" />Yes
<input type="radio" name="22. Do you have 2nd Occupation" value="No" />No<br />
<div class="extra-field">
    <label class="label">Secondary Occupation?</label> <input class="textbox requiredField" name="22a. If Yes - Secondary Occupation?" type="text" />
    <div class="clear">&nbsp;</div>
</div>

和 jquery -

// Trigger extra fields to show depending on what checkme class is clicked
    $(".checkme").on('click', function(){
        $(this).next(".extra-field").fadeToggle(500);
    });
4

3 回答 3

1

到目前为止我能找到的最佳解决方案：

http://jsfiddle.net/GmYjd/8/

$(':radio').click(function(){
    $(this).parent().next(".extra-field")
        .toggle(this.value.toLowerCase() == 'yes');
});

您必须将无线电分组到一个元素中，以便您可以专门选择相应的额外字段。

于 2013-03-20T11:11:04.987 回答
0

我使这很容易理解（尽管代码比其他代码多）..我只是检查了收音机的点击值是否是yes showdiv，如果没有的hide话..是的input:radio将选择所有收音机..您可以使用名称属性指定..但是因为你的名字太长了（我建议你改一下）..

试试这个

$('input:radio').click(function(){
  if($(this).val()=='Yes'){
     $(this).siblings(".extra-field").show();  //use slideDown('slow') for effect
  }else{
     $(this).siblings(".extra-field").hide(); //use slideUp('slow') for effect
  }

});

并且请确保您要使用该名称....在发布表格时可能会给您带来麻烦..（如果您这样做）...

在这里工作小提琴

更新的小提琴

于 2013-03-20T10:55:31.180 回答
0

最初使辅助输入字段不可见，并在单击“是”后使其显示。

<label class="label2">Do you have a 2nd Occupation?</label>
<input class="checkme" type="radio" name="22. Do you have 2nd Occupation" value="Yes" />
Yes
<input type="radio" name="22. Do you have 2nd Occupation" value="No" />
No
<br />
<div class="extra-field" style="display:none">
    <label class="label">Secondary Occupation?</label>
    <input class="textbox requiredField" name="22a. If Yes - Secondary Occupation?" type="text"  />
    <div class="clear">
        &nbsp;
    </div>
</div>

和 JS

$('.checkme').click(function() {
   if($('.checkme').is(':checked')) { 
       $(".extra-field").css("display","block")
   }
});
于 2013-03-20T10:56:49.497 回答