在选择单选按钮时隐藏/显示div

Question

这是我的HTML代码

<div class="wrapper"> <strong>Space portion</strong>

<br />
<input type="radio" name="rdSpace" value="RJ" />Space 1
<br />
<input type="radio" name="rdSpace" value="SM" />Space 2
<br />
<br />
</div>
<div class="wrapper"> <strong> Template</strong>

<br />
<input type="radio" name="rdTemplate" value="uploadTemplate" />Upload your own file
<label class="cabinet">
    <input style="margin-left:10px;" type="file" name="user_upload_template"
    class="uploader" id="file">
    <br />
    <input type="radio" name="rdTemplate" value="preExisting" />Choose below
    <div id="RJ" class="tempDisp">Div 1 Preview</div>
    <div id="SM" class="tempDisp">Div 2 Preview</div>

这是jquery代码

$(document).ready(function () {
$("div.tempDisp").hide();
$('[id="' + $(":radio:checked").val() + '"]').show();
$('input[name="rdSpace"]:radio,input[name="rdTemplate"]').click(function () {
    $("div.tempDisp").fadeOut('slow');
    $('[id="' + $(this).val() + '"]').fadeIn('slow');
});
});

jQuery代码的目的是在选择“ Space 1”广播时显示“ Div 1 Preview”，并在选择“ Space 2”广播时显示“ Div 2 Preview”。

现在，我尝试在选择“上传自己的文件”广播时添加隐藏“ Div 1预览”和“ Div 2预览”的功能。当我点击“选择下方”收音机时，它们不会显示回来。为什么？

这是小提琴http://jsfiddle.net/bTM66/

Answer 1

尝试这个：

$(document).ready(function () {
    $("div.tempDisp").hide();
    $('[id="' + $(":radio:checked").val() + '"]').show();
    $('input[name="rdSpace"]:radio,input[name="rdTemplate"]').change(function () {
        $("div.tempDisp").fadeOut('slow');
        if ($(this).val() === "preExisting") {
            $(":radio:checked:first").change();
        } else {
            if(!$('input[value="uploadTemplate"]').is(':checked')){
            $('[id="' + $(this).val() + '"]').fadeIn('slow');
          }
        }
    });
});

参见Sample Fiddle

Answer 2

因此，要根据两个单独的值来显示两个div中的一个或一个都不显示。

click事件绑定到两组单选按钮，因此您不能使用$(this)来获取已选中的值以选择要显示的ID，您需要通过其名称指定选择哪个单选按钮。

您还需要检查哪个其他选项（浏览器/选择）已选中并显示或未显示。

并且使用更改而不是单击，这样您就不会获得不必要的淡出/淡出。

而且我会在divs .tempDisp中添加style="display:none" ，这样它们就可以在没有js的情况下被隐藏。

工作jsfiddle

$(document).ready(function () {

    $('input[name="rdSpace"]:radio,input[name="rdTemplate"]').on('change', function () {
        $("div.tempDisp").fadeOut('slow');
        if ($('input[name="rdTemplate"]:checked').val()=='preExisting'){
            $('[id="' + $('input[name="rdSpace"]:checked').val() + '"]').fadeIn('slow');
        }
    })
});

将此项设置为已选中，以便可以在更改第一个选择的用户上进行显示决定。

<input type="radio" name="rdTemplate" value="preExisting" checked="checked" />

Answer 3

您的代码在做什么。

$('input[name="rdSpace"]:radio,input[name="rdTemplate"]').click(function () { ==点击时，在带有给定选择器的广播中

$("div.tempDisp").fadeOut('slow'); ==类tempDisp的div淡出速度慢

$('[id="' + $(this).val() + '"]').fadeIn('slow'); ==带有ID的div（选定的广播价）显示

问题

单击“ Upload your own file ，当前值为“ uploadTemplate并且jquery将无法找到id = uploadTemplate div。 所以什么也没发生

onclick Choose below相同的东西..当前值是preExisting并再次找不到id=preExisting div。 所以什么也不会发生

工作

 $(document).ready(function () {
   $("div.tempDisp").hide();
   $('[id="' + $(":radio:checked").val() + '"]').show();
   $('input[name="rdSpace"]:radio,input[name="rdTemplate"]').click(function () {
      $("div.tempDisp").fadeOut('slow');
      $('[id="' + $(this).val() + '"]').fadeIn('slow');
      if($(this).val()=="preExisting"){ //here check if value is preExistig
         $('#'+ $('input[name="rdSpace"]:checked').val()).fadeIn('slow');
         //$('#RJ,#SM').fadeIn('slow');  //if yes show the div you wanted which is RJ,SM
      }
   });
});

更新

更换

  $('#RJ,#SM').fadeIn('slow');

同

 $('#'+ $('input[name="rdSpace"]:checked').val()).fadeIn('slow');

更新工作提琴