隐藏/显示单选按钮的选择的股利

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代码的目的是为了显示“1个区预览”在选择“空间1”收音机和显示“Div 2预览”选择“空间2”收音机..直到现在它工作正常

现在我试图添加隐藏“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显示，你需要指定它的是哪个单选按钮选择其名称。

你还需要检查哪些其他选择（浏览器/送）的检查和显示或不显示。

而且使用上的变化，而不是点击，这样你就不会得到不必要的淡出/淡入。

我想补充style="display:none"到.tempDisp所以他们已经隐藏在负荷而不JS的div。

Working 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淡出慢

$('[id="' + $(this).val() + '"]').fadeIn('slow'); == ID为（选择的无线电VAL）在div显示

问题

上点击Upload your own file当前值uploadTemplate和jQuery将无法找到DIV与id = uploadTemplate。所以没有任何反应

的onclick Choose below同样的事情..当前值preExisting，并再次它将不会与id=preExisting找到股利。所以没有什么再

发生的工作都是围绕

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

updated working fiddle