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

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

1 голос
/ 05 марта 2012

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

Вот как это настроено: если пользователь выбирает переключатель, чей класс "color_toggle "и значение равно" Другое ", я хочу, чтобы он показал идентификатор элемента" define_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");
    }
});
});

Ответы [ 2 ]

1 голос
/ 06 марта 2012

Вы можете проверить состояние переключателя для вашей кнопки-переключателя следующим образом: 

$('#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

0 голосов
/ 06 марта 2012

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

<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");
    }
});
});
...