Простой селектор jQuery

Question

Простой селектор jQuery

0

Итак, у меня есть базовая форма

<div id="webForm_Contact">
    <form action="">
        <label for="form_fName"> Full name: </label>
        <input type="text" id="form_fName"><br />
        <label for="form_email" > Email: </label>
        <input type="text" id="form_email"><br />
        <label for="form_phone"> Phone </label>
        <input type="text" id="form_phone"><br />
        <label for=""> Location: </label>
        <label for="form_radio_london"> London</label>
        <input type="radio" id="form_radio_london" value="London">
        <label for="form_radio_Toronto"> Toronto</label>
        <input type="radio" id="form_radio_Toronto" value="Toronto">        
        <label for="form_radio_other"> Other</label>
        <input type="radio" id="form_radio_other" value="Other">

        <!-- radio select here-->

            <div id="otherCity">
                <label for="form_otherCity"> Other City </label> 
                <input type="text" id="form_otherCity">
            </div>
            <br />
        <input type="submit" value="Submit">

    </form>
</div>

и простой jQuery :: Edit :: немного изменил код, поскольку я понял, что он делает больше, чем это необходимо.

$ (Документ).ready (функция() {

    if($("#form_radio_other").is(':checked') ){
        $("#otherCity").css("display:inline");
    }
    else{
        $("#otherCity").css("display:none");
    }   


});

То, что он должен был делать, - это нажать кнопку "Другое", показать "другой", чтобы разрешить ввод формы, иначе он должен быть скрыт. То, что я не понимаю, неправильно. Я не понимаю проблемы, связанные с браузером, просто проблемы с кодом. Любая помощь будет оценена по достоинству.

CTully12 21 сен. 2013, в 02:36

Источник

Теги:

jquery

forms

5 ответов

1

Измените свой JavaScript на:

$(document).ready(function(){
    $("input:radio").change(function(){
        if($('#form_radio_other').is(':checked') ){
            $("#otherCity").css("display","inline");
        }
        else{
            $("#otherCity").css("display","none");
        }
    });
});

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

Пример jsFiddle: http://jsfiddle.net/nWkhT/

Sadiq 20 сен. 2013, в 22:48

1

Чтобы выбрать только один переключатель, вы должны использовать атрибут name для каждого из них

Пример: <input type="radio" id="form_radio_london" value="London" name="myradiobuttongroup"/>

Nikola Mitev 20 сен. 2013, в 21:59

0

Да, просто увидел это и исправил. Спасибо!
CTully12 21 сен. 2013, в 00:12

1

Селекторы jQuery немного перепутаны.

Например: $('input:radio[name="form_radio_other"]').change... пытается выбрать радио с именем form_radio_other, которого не существует. Он должен быть $('#form_radio_other').

if($("form_radio_other") не использует . или # чтобы выбрать то, что вы ищете.

James Bruckner 20 сен. 2013, в 21:05

0

Здесь много проблем:

Названия переключателей должны быть одинаковыми, чтобы помещать их в одну группу
Функция CSS JQuery похожа на .css("attr", "value"), а не .css("attr:value")

$('input:radio').change(function(){
    if($("#form_radio_other").is(':checked') ){
        $("#otherCity").css("display", "inline");
    }
    else{
        $("#otherCity").css("display", "none");
    }
});

скрипка

McGarnagle 20 сен. 2013, в 22:22

0

Спасибо! Это было немного, так как я сделал несколько jQuery, как это. Я ценю это.
CTully12 21 сен. 2013, в 00:13

Ещё вопросы

Да, просто увидел это и исправил. Спасибо!
Спасибо! Это было немного, так как я сделал несколько jQuery, как это. Я ценю это.

Vucko · Accepted Answer · 2013-09-20T22-30-00.000Z

У вас нет атрибута name в вашем HTML (<input type="radio" id="form_radio_other" value="Other">) и ваша функция css JQuery недействительна.

Измените так:

$('#form_radio_other').change(function(){
    if($("#form_radio_other").is(':checked') ){
       $("#otherCity").css("display","inline");
    }
    else{
        $("#otherCity").css("display","none");
    }
});

JSFiddle