基于无线电选择显示其他表单元素

我试图根据单选按钮中选择的任何内容显示具有某些表单元素的特定块html。基于无线电选择显示其他表单元素

下面是我所拥有的框架，我没有包括我尝试过的任何JQUERY，因为我无法获得任何工作。有人可以帮我填补空白吗？

TIA！

<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script> 
<script src="/js/jquery.chainedSelects.js" type="text/javascript" charset="utf-8"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    showValBox = function(data) { 

    }; 
}); 
</script> 


<form action="" method="post" id="SomeForm" /> 
<table> 
    <tr> 
     <td class="td-ctr">Size</td> 
     <td class="td-ct"><input type="radio" name="Radio" value="Value1" onChange="showValBox(this.value)" /> Value <input type="radio" name="Radio" value="Value2" onChange="showValBox(this.value)" /> Value</td> 
    </tr> 
    <div id="Value1" style="display:none"> 
    <tr> 
     <td class="td-ctr">Only if Value 1</td> 
     <td class="td-ct"><input type="text" name="SomeName" value="" /></td> 
    </tr> 
    </div>   
    <div id="Value2" style="display:none"> 
    <tr> 
     <td colspan="2" class="td-ct">Online if Value 2</td> 
    </tr> 
    <tr> 
     <td class="td-ctr">SomeName1</td> 
     <td class="td-ct"><input type="text" name="SomeName1" value="" /></td> 
    </tr> 
    <tr> 
     <td class="td-ctr">SomeName2</td> 
     <td class="td-ct"><input type="text" name="SomeName2" value="" /></td> 
    </tr> 
    <tr> 
     <td class="td-ctr">SomeName3</td> 
     <td class="td-ct"><input type="text" name="SomeName3" value="" /></td> 
    </tr> 
    <tr> 
     <td class="td-ctr">SomeName4/td> 
     <td class="td-ct"><input type="text" name="SomeName4" value="" /></td> 
    </tr> 
    <tr> 
     <td class="td-ctr">SomeName5</td> 
     <td class="td-ct"><input type="text" name="SomeName5" value="" /></td> 
    </tr> 
    <tr> 
     <td class="td-ctr">SomeName6</td> 
     <td class="td-ct"><input type="text" name="SomeName6" value="" /></td> 
    </tr> 
    <tr> 
     <td class="td-ctr">SomeName7</td> 
     <td class="td-ct"><input type="text" name="SomeName7" value="" /></td> 
    </tr>                    
    </div> 
</table> 
</form>

来源

2009-11-09 Chris

首先，您不能在表格行之间语义上拥有DIV。它们必须包含在您的TD元素中。我建议你将您的ID标签应用于TR元素，这将隐藏整行。其次，我建议你们所有的TR分享一个班级，以便在收音机变化时轻松隐藏元素。

隐藏的行共享类hiddenContainers

CODE

$(ready(function() { 
    $("input[name='Radio']").click(function() { 
     var val = $(this).val(); 
     $('.hiddenContainers').hide(); 
     $('#'+val).show(); 
    }); 
});

来源

2009-11-09 23:14:58

我相信IE没有处理好改变时，你应该使用单击代替。 – 2009-11-09 23:23:10

注意，我会更新。 – 2009-11-09 23:32:35

我也试过这也使用tbody（导致另一个帖子说tr不能与ie一起工作），并且我什么也没得到，一切都出现在页面上，当选择收音机时没有任何东西消失 – Chris 2009-11-10 12:27:45

你的HTML是无效的，因为DIV元素必须是列中如果包含的话在一张桌子里。你真正想要做的是给你的行取决于它们属于哪个集合然后根据类来显示/隐藏。您可以考虑使用“隐藏”类来控制“display：none;”风格，然后只需添加/删除此类。

我可能会在用户点击运行它，并使用jQuery：

$('[name=Radio]').click(function() { 
    var klass = '.' + $(this).val(); 
    $('.class1,.class2').addClass('hidden'); 
    $(klass).removeClass('hidden'); 
}); 

<form action="" method="post" id="SomeForm" /> 
<table> 
    <tr> 
     <td class="td-ctr">Size</td> 
     <td class="td-ct"> 
      <input type="radio" name="Radio" value="class1" /> Value 
      <input type="radio" name="Radio" value="class2" /> Value 
     </td> 
    </tr> 
    <tr class="class1 hidden"> 
     <td class="td-ctr">Only if Value 1</td> 
     <td class="td-ct"><input type="text" name="SomeName" value="" /></td> 
    </tr> 
    <tr class="class2 hidden"> 
     <td colspan="2" class="td-ct">Online if Value 2</td> 
    </tr 
    ...

来源

2009-11-09 23:17:10 tvanfosson

IIRC，你需要隐藏单元格而不是行来让它在IE中很好地播放 – 2009-11-09 23:40:44

这看起来不错，所以我试着用tbody而不是tr，但它不起作用 - 所有这一切默认情况下出现，当我更改无线电选择时不会隐藏任何内容。 – Chris 2009-11-10 12:25:38

您是否设置了“隐藏”风格的类，使其具有“display：none;”如果你使用这种技术，那很关键。 – tvanfosson 2009-11-10 12:39:06

不是一个真正的回答你的问题，但在其他两个答案评论已经存在被注意到你不能把资料核实之间的行...

为了这个目的，即，将相关的行成一个单一的元素，你可能有兴趣在TBODY元素，

<table> 
    <tbody id="somegroup"> 
     <tr><td>...</td></tr> 
     <tr><td>...</td></tr> 
    </tbody> 
    <tbody id="someOthergroup"> 
     <tr><td>...</td></tr> 
     <tr><td>...</td></tr> 
     <tr><td>...</td></tr> 
     <tr><td>...</td></tr> 
    </tbody> 
</table>

来源

2009-11-09 23:24:01 Funka

你应该不属于R最后在实际标签上使用更改事件，以便代码正常降级，从而允许两个选项可见。此代码还会记住刷新页面时选择了哪个收音机并显示正确的部分。

你不能在表中间放置一个DIV标签，所以我重新考虑了一下代码。

<html> 
    <head> 
     <script type="text/javascript" src="jquery-1.3.2.min.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function() { 
       $("tbody[id^='Value']").hide(); 
       $("input[name='Radio']").click(function(){ 
        change_selection(); 
       }); 
       change_selection(); 
      }); 

      function change_selection() { 
       var selected_value = $("input[name='Radio']:checked").val(); 
       $("tbody[id^='Value']").hide(); 
       $("#" + selected_value).show(); 
      } 
     </script> 
    </head> 
    <body> 
     <form action="" method="post" id="SomeForm" /> 
      <table> 
       <tbody> 
        <tr> 
         <td class="td-ctr">Size</td> 
         <td class="td-ct"><input type="radio" name="Radio" value="Value1" checked="checked"/> Value <input type="radio" name="Radio" value="Value2" /> Value</td> 
        </tr> 
       </tbody> 
       <tbody id="Value1"> 
        <tr> 
         <td class="td-ctr">Only if Value 1</td> 
         <td class="td-ct"><input type="text" name="SomeName" value="" /></td> 
        </tr> 
       </tbody> 
       <tbody id="Value2"> 
        <tr> 
         <td colspan="2" class="td-ct">Only if Value 2</td> 
        </tr> 
        <tr> 
         <td class="td-ctr">SomeName1</td> 
         <td class="td-ct"><input type="text" name="SomeName1" value="" /></td> 
        </tr>  
        <tr> 
         <td class="td-ctr">SomeName2</td> 
         <td class="td-ct"><input type="text" name="SomeName2" value="" /></td> 
        </tr> 
        <tr> 
         <td class="td-ctr">SomeName3</td> 
         <td class="td-ct"><input type="text" name="SomeName3" value="" /></td> 
        </tr> 
        <tr> 
         <td class="td-ctr">SomeName4</td> 
         <td class="td-ct"><input type="text" name="SomeName4" value="" /></td> 
        </tr> 
        <tr> 
         <td class="td-ctr">SomeName5</td> 
         <td class="td-ct"><input type="text" name="SomeName5" value="" /></td> 
        </tr> 
        <tr> 
         <td class="td-ctr">SomeName6</td> 
         <td class="td-ct"><input type="text" name="SomeName6" value="" /></td> 
        </tr> 
        <tr> 
         <td class="td-ctr">SomeName7</td> 
         <td class="td-ct"><input type="text" name="SomeName7" value="" /></td> 
        </tr>                                        
       </tbody> 
      </table> 
     </form> 

    </body> 
</html>

干杯，院长

来源

2009-11-09 23:36:36 Dean

我完全按照原样试过，它不起作用，当我改变单选按钮时，没有什么会改变 - 如果我在表单中有其他单选按钮，它会影响吗？ – Chris 2009-11-10 12:26:28

它应该与其他单选按钮一起工作，因为它只针对名为“Radio”的输入，只要确保其他输入中没有相同的名称。这是值得复制我提供给单个HTML文件的代码，并首先给它一个测试和一个播放，以确保你了解它是如何工作的。干杯，迪安 – Dean 2009-11-10 22:25:15

基于无线电选择显示其他表单元素

回答

相关问题