基於無線電選擇顯示其他表單元素

我試圖根據單選按鈕中選擇的任何內容顯示具有某些表單元素的特定塊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

基於無線電選擇顯示其他表單元素

回答

相關問題