html/jquery comb input type: text in radio

Я делаю форму и хотел бы, чтобы поле ввода текста находилось внутри поля ввода радио/флажка. Каков правильный способ сделать это?html/jquery comb input type: text in radio

<form> 
    Question 1: 
    <label for="Q01_A01"><input name="Q01" id="Q01_A01" type="radio" value="Q01_A01" />Yes </label> 
    <label for="Q01_A02"><input name="Q01" id="Q01_A02" type="radio" value="Q01_A02" />No, why? ...TEXT FIELD HERE.....</label> 
    <label for="Q01_A03"><input name="Q01" id="Q01_A03" type="radio" value="Q01_A03" />I don't know </label> 
    </form>

Я не уверен, если это необходимо, но я думаю, что это будет выглядеть хорошо, если кто-то выбирает «No» опции появляется текстовое поле - в противном случае это скрыто. Если есть простой способ сделать это с помощью jQuery, я был бы рад использовать его.

источник

2012-01-20 JaneVi

Прежде всего, не должно быть более одного элемента с тем же «идентификатором». Также правильнее поместить отдельные теги «метки» для каждой текстовой заметки для радио, например: ' Yes', поэтому радио также изменит его состояние, если вы нажмете на его ярлык. Теперь, в чем проблема, чтобы слушать событие изменения и показывать дополнительное текстовое поле, когда это необходимо? – YuS

Вы абсолютно правы, я отредактировал вопрос. – JaneVi

Вот как вы могли бы сделать это в более общем смысле: http://jsfiddle.net/mYZaQ/62/
есть несколько вещей, которые должны быть последовательны форме, хотя:

Входы должны быть в пределах label
Ввод текста должен иметь имя why
радиокнопки с дополнительным полем ввода должна иметь класс more
Поле ввода текста должно быть непосредственно позади или ниже радиокнопки имени why

HTML:

<form> 
<label for="Q01"> 
    Question 1:<br/> 
<input name="Q01" id="Q1_A01" type="radio" value="Q1_A01" />Yes <br /> 
<input name="Q01" id="Q1_A02" type="radio" value="Q1_A02" class="more" />No, why? 
    <input name="why" id="Q1_A03" type="text" value="" /><br /> 
<input name="Q01" id="Q1_A04" type="radio" value="Q1_A04" />I don't know <br /> 
</label> 
<br /> 
<label for="Q02"> 
    Question 2:<br/> 
<input name="Q02" id="Q2_A01" type="checkbox" value="Q2_A01" />Yes <br /> 
<input name="Q02" id="Q2_A02" type="checkbox" value="Q2_A02" class="more" />No, why? 
    <input name="why" id="Q2_A03" type="text" value="" /><br /> 
<input name="Q02" id="Q2_A04" type="checkbox" value="Q2_A04" />I don't know <br /> 
</label> 
</form>

... и jquery:

$(document).ready(function() { 
    $("input[name$='why']").hide(); 

    $("label input[type='radio']").change(function() { 
    if ($(this).hasClass('more')) $(this).next().show(); 
    else $(this).parent().children("input[type='text']").hide(); 
    }); 

    $("label input[type='checkbox']").change(function() { 
    if ($(this).hasClass('more')) $(this).next().toggle(); 
    }); 
});

источник

2012-01-20 09:27:32 Niklas

Это выглядит хорошо! Что, если их было больше в форме, я должен каждый раз переписывать их для каждого вопроса? – JaneVi

Что-то вроде этого? Работает в FF и IE ... – Niklas

Это именно то, что мне нужно, спасибо! – JaneVi

да это очень просто .. вы можете достичь этого, следуя коду Прежде всего, вы не можете иметь одинаковые идентификаторы для всех идентификаторов входного радиосигнала, должны быть разными.

<form> 
    <label for="Q01"> 
    Question 1: 
    <input name="Q01" id="Q01" type="radio" value="Q1_A01" />Yes <br /> 
    <input name="Q01" id="Q02" type="radio" value="Q1_A02" />No, why?<input type="text" name="reason" id="reason" class="noreason" /><br /> 
    <input name="Q01" id="Q02" type="radio" value="Q1_A03" />I don't know <br /> 
    </label> 
    </form>

SCRIPT JQuery

$(document).ready(function() { 

$(".noreason").css("display", "none"); 
$("#Q02").click (function() { 

    if ($(this).checked == true) 
    { 
     $(".noreason").css("display", "block"); 
    } 
}) 

});

источник

2012-01-20 09:15:54 Murtaza

В соответствии с проблемой с меткой '' лучше использовать событие 'change', а не' click'. – YuS

У события обмена есть некоторая проблема с браузерами IE, это единственная причина, по которой я предпочитаю onclick. в любом случае это не вопрос .. – Murtaza

Привет, что вы пытаетесь достичь, это легок связывания щелчка или изменить событие видимости ввода текста на самом деле не нужно JQuery для этого. Если вы используете jquery, вы можете сделать $ ("# radioId"). Change (function() {$ ("textinputId"). Show()}; если у вас есть текстовый ввод как отображение: none на doc ready. не так уж плохо, с телефона ..

источник

2012-01-20 09:18:31

html/jquery comb input type: text in radio

ответ

Смежные вопросы