Выбранная радиокнопка отображает ввод текста с помощью jQuery

Question

У меня есть группа радиобоксов, где вы можете выбрать свою сумму. Последний вариант - Другое. Мне бы хотелось, чтобы этот параметр отображал поле «Сумма» после его проверки. Это построено с помощью мобильного телефона jquery.

jsFiddle link

<fieldset data-role="controlgroup">
<legend>Select Amount</legend>
<input type="radio" name="amount" id="50" value="50" checked="checked"/>
<label for="50">$50</label>

<input type="radio" name="amount" id="100" value="100"/>
<label for="100">$100</label>

<input type="radio" name="amount" id="250" value="250"/>
<label for="250">$250</label>

<input type="radio" name="amount" id="500" value="500"/>
<label for="500">$500</label>

<input type="radio" name="amount" id="1000" value="1000"/>
<label for="1000">$1000</label>

<input type="radio" name="amount" id="other" value="other"/>
<label for="other">Other</label>
    <div id="enter_amount">
        <label for="other_amount">Enter Amount:</label>
        <input type="text" name="other_amount" id="other_amount" value="" data-theme="d"  />
    </div>
</fieldset>

Что мне нужно написать, чтобы это работало? В настоящее время я пробую следующее:

$(document).ready(function(){
    $("#enter_amount").css("display","none");
        $("#other").click(function(){
        if ($('#other:checked')) {
            $("#enter_amount").slideDown("slow"); //Slide Down Effect
        } else {
            $("#enter_amount").slideUp("slow");  //Slide Up Effect
        }
    });
});

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

Answer 1

Используйте .change вместо .click. Также я изменил ваш код для учета некоторых других сценариев. Вот такая скрипка .

$(document).ready(function(){
    $('#enter_amount').hide(); 
    $('fieldset :radio').change(function(){
       if( this.id === 'other' )
           $('#enter_amount').slideDown('slow'); 
        else if( $('#enter_amount').is(':visible') )
           $('#enter_amount').slideUp('slow');               
    }); 
});

Answer 2

Это переключатели, поэтому при выборе другого переключателя по умолчанию другие отключаются. Поэтому вы должны связать все входы с именем «сумма». Также использование jQuery.is () было бы лучшим подходом к проверке, установлен ли флажок. Также используйте jQuery.change () событие

$(document).ready(function(){
    $("#enter_amount").css("display","none");
    $('input[name="amount"]').change(function(){
        if ($(this).is('#other')) {
            $("#enter_amount").slideDown("slow"); //Slide Down Effect
        } else {
            $("#enter_amount").slideUp("slow");  //Slide Up Effect
        }
    });
});

Вот рабочая скрипка http://jsfiddle.net/jafmC/13/

Answer 3

$(document).ready(function(){
    $("#enter_amount").hide();

    $("input[name='amount']").change(function(){

        if($(":checked").val() == "other"){
            $("#enter_amount").slideDown("slow"); //Slide Down Effect
        } else {
            $("#enter_amount").slideUp("slow");  //Slide Up Effect
        }
    });
});

Вы можете попробовать это

Answer 4

Поскольку вы на самом деле больше не взаимодействуете с самими переключателями (используйте функцию «осмотреть элемент» в Firebug, Web Inspector или Dragonfly), а вместо этого с элементами, предоставленными jQuery Mobile (или jQuery UI), Вы должны изменить ваши селекторы:

$(document).ready(function() {
    $("#enter_amount").css("display", "none");
    $(".ui-radio").click(function() {
        if ($(this).has('#other') && $(this).has('.ui-icon-radio-on')){
            $('#enter_amount').slideDown(500); // works
        }
        else {
            $('#enter_amount').slideUp(500); // doesn't yet work
        }
    });
});

JS Fiddle demo .

<ч /> Отредактировано (после вполне некоторое раздражение, я должен признаться), чтобы добавить улучшенную (то есть "работающую") if / else проверку:

$(document).ready(function() {
    $("#enter_amount").css("display", "none");
    $(".ui-radio").click(function() {
        if ($(this).find('#other').length) {
            $('#enter_amount').slideDown(500);
        }
        else {
            $('#enter_amount').slideUp(500);
        }
    });
});

JS Fiddle demo .

Answer 5

Попробуйте это

$(document).ready(function(){
    $("#enter_amount").css("display","none");
        $("#other").click(function(){
        if ($(this).is(':checked')) {
            $("#enter_amount").slideDown("slow"); //Slide Down Effect
        } else {
            $("#enter_amount").slideUp("slow");  //Slide Up Effect
        }
    });
});

Answer 6

Вы должны изменить его на:

if ($(this).is(":checked")) {
            $("#enter_amount").slideDown("slow"); //Slide Down Effect
        } else {
            $("#enter_amount").slideUp("slow");  //Slide Up Effect
        }