Question

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

我尝试过使用类来实现这个功能，但我根本无法工作，不过我相信我误解了这个概念。

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

总而言之，我需要2个单选按钮表示是和否，当选择是时，需要显示带有一类额外字段的下一个直接div，然后如果单选按钮被选为否则再次隐藏。我相信$（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);
    });

Answer 1

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

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

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

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

Answer 2

我让这很容易理解（虽然代码比其他代码更多）..我只是检查了无线电的点击值是yes show div，如果没有hide它。。并且是input:radio将选择所有无线电..您可以指定名称attrbute ..但由于您的名字太长（我建议您将其命名）...

试试这个

$('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
  }

});

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

working fiddle here

updated fiddle

Answer 3

首先使辅助输入字段不可见，并在单击是时显示。

<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")
   }
});

如果无线电选择器开启，我该如何正确显示和隐藏div？

3 个答案: