HTML Form Toggle Скрыть/Показать поля на основе выбора

Question

В моей форме (показано ниже) У меня есть набор параметров радио. Если пользователь выбирает последний параметр для «Другой», я хочу, чтобы div показывал и скользил вниз, где они могли ввести пользовательское значение в текстовое поле. Я также хочу иметь несколько экземпляров одного и того же процесса несколько раз в одной и той же форме (очевидно, с разными идентификаторами).

Вот как он настроен: если пользователь выбирает переключатель, который является классом «color_toggle», а значение равно «Другое», я хочу, чтобы он отображал идентификатор элемента «указать_color_box». Если они выбирают другой переключатель, я хочу, чтобы этот же элемент был скрыт.

Вот ответ на всякий случай, если у кого-то другая проблема. Моя форма элемент показан здесь:

<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') 

Таким образом, вам даже не нужно полагаться на значение переключателя, которое вы можете решить по любой причине - просто его состояние.

Примечание: если ваш элемент имеет идентификатор, используйте его, чтобы выбрать его, это самый быстрый метод. Чем сложнее селектор, тем медленнее выбор!

---

Применительно к вашему коду, он дает следующее (инвертирование slideUp/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