HTML表單根據選擇切換隱藏/顯示字段

Question

在我的表單上（如下所示）我有一組無線電選項。如果用戶選擇「其他」的最後一個選項，我希望div顯示並向下滑動，以便他們可以在文本框中輸入自定義值。我也希望能夠在同一個表單中多次使用同一個進程的多個實例（顯然有不同的ID）。

以下是它的設置方式：如果用戶選擇class爲「color_toggle」且值等於「Other」的單選按鈕，我希望它顯示元素ID「指定色彩盒」。如果他們選擇不同的單選按鈕，我想隱藏相同的元素。

以下是答案，以防其他人有相同的問題。 我的表單元素如下所示：

<fieldset class="w100"> 
     <div class="rowElem align-left"> 
     <input type="radio" id="Gray" name="color" value="Gray" class="color_toggle" checked > 
      <label>Gray (Standard)</label> 
     </div> 
     <div class="rowElem align-left"> 
      <input type="radio" id="All Yellow" name="color" value="All Yellow" class="color_toggle"> 
      <label>All Yellow</label> 
      </div> 
     <div class="rowElem align-left"> 
     <input type="radio" id="Yellow Posts Black Panels" name="color" value="Yellow Posts Black Panels" class="color_toggle"> 
      <label>Yellow Posts/Black Panels</label> 
     </div> 
     <div class="rowElem align-left"> 
     <input type="radio" id="other_color" name="color" value="Other" class="color_toggle"> 
     <label>Other</label> 
     </div> 
     <div id="specify_color_box" class="form-subscr-field rowElem align-left" style="display:none;"> 
     <label for="specify_color" id="specify_color_label">Specify Custom Color: </label> 
     <input id="specify_color" type="text" name="specify_color" class="inputbox" size="10" value="Enter custom color" onFocus="if(this.value=='Enter custom color') this.value='';" onBlur="if(this.value=='') this.value='Enter custom color';"/> 
     </div> 
</fieldset> 

和我的jQuery如下所示：

$(document).ready(function(){ 
    $("input[name='color']").click(function(){ 
    if($(this).val() == "Other") { 
     $("#specify_color_box").slideDown("fast"); 
    } 
    else{ 
     $("#specify_color_box").slideUp("fast"); 
    } 
}); 
}); 

Answer 1

這裏的答案，以防萬一任何人都有同樣的問題。我的表單元素如下所示：

<fieldset class="w100"> 
       <div class="rowElem align-left"> 
      <input type="radio" id="Gray" name="color" value="Gray" class="color_toggle" checked > 
           <label>Gray (Standard)</label> 
        </div> 
       <div class="rowElem align-left"> 
            <input type="radio" id="All Yellow" name="color" value="All Yellow" class="color_toggle"> 
            <label>All Yellow</label> 
          </div> 
       <div class="rowElem align-left"> 
        <input type="radio" id="Yellow Posts Black Panels" name="color" value="Yellow Posts Black Panels" class="color_toggle"> 
          <label>Yellow Posts/Black Panels</label> 
         </div> 
         <div class="rowElem align-left"> 
       <input type="radio" id="other_color" name="color" value="Other" class="color_toggle"> 
        <label>Other</label> 
       </div> 
       <div id="specify_color_box" class="form-subscr-field rowElem align-left" style="display:none;"> 
       <label for="specify_color" id="specify_color_label">Specify Custom Color: </label> 
       <input id="specify_color" type="text" name="specify_color" class="inputbox" size="10" value="Enter custom color" onFocus="if(this.value=='Enter custom color') this.value='';" onBlur="if(this.value=='') this.value='Enter custom color';"/> 
      </div> 
</fieldset> 

和我的jQuery如下所示：

$(document).ready(function(){ 
    $("input[name='color']").click(function(){ 
    if($(this).val() == "Other") { 
        $("#specify_color_box").slideDown("fast"); 
    } 
    else{ 
        $("#specify_color_box").slideUp("fast"); 
    } 
}); 
}); 

Answer 2

您可以檢查你的單選按鈕，像這樣的選中狀態：

$('#Other').is(':checked') 

這樣，您甚至不必依賴單選按鈕的值 - 無論出於何種原因，您都可以決定更改它的狀態。

注意：如果你的元素有一個ID，用它來選擇它，這是最快的方法。選擇器越複雜，選擇越慢！

---

應用到你的代碼，它給（翻轉效果基本show /了slideDown正確匹配的條件）以下：

$(document).ready(function() { 
    $("#specify_color_box").css("display", "none"); 
    $(".color_toggle").click(function() { 
     if ($('#other_color').is(':checked')) { 
      $("#specify_color_box").slideDown("fast"); 
     } else { 
      $("#specify_color_box").slideUp("fast"); 
     } 
    }); 
});​ 

DEMO