Блог

Главная - Вопросы по программированию - Проверка нескольких переключателей в одной форме

Проверка нескольких переключателей в одной форме

#jquery #html #forms #twitter-bootstrap #radio-button

#jquery #HTML #формы #twitter-bootstrap #переключатель

Вопрос:

Как я могу проверить переключатели, которые находятся НЕ в той же строке, но в той же форме? Я хочу использовать это как опрос.

Я абсолютный новичок в jQuery, если есть способ решить проблему с этим.

Вот мой код (я использую bootstrap v3.3.7.) :

     <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center">
                <form action="XXXX" method="post">
                    <div class="row fragen">
                        <p> Wie hat es dir gefallen? </p>
                        <div class="hidden-xs col-sm-3 caption left" onclick="setAnswer(1, -3);">Agree</div>
                        <div class="col-sm-6 col-xs-12" data-toggle="buttons" role="group" aria-label="Options">
                            <label class="btn agree max" onclick="setAnswer(1, -3);">
                                <input type="radio" name="options" autocomplete="off">
                            </label>
                            <label class="btn agree med" onclick="setAnswer(1, -2);">
                                <input type="radio" name="options" autocomplete="off">
                            </label>
                            <label class="btn agree min" onclick="setAnswer(1, -1);">
                                <input type="radio" name="options" autocomplete="off">
                            </label>
                            <label class="btn neutral" onclick="setAnswer(1, 0);">
                                <input type="radio" name="options" autocomplete="off">
                            </label>
                            <label class="btn disagree min" onclick="setAnswer(1, 1);">
                                <input type="radio" name="options" autocomplete="off">
                            </label>
                            <label class="btn disagree med" onclick="setAnswer(1, 2);">
                                <input type="radio" name="options" autocomplete="off">
                            </label>
                            <label class="btn disagree max" onclick="setAnswer(1, 3);">
                                <input type="radio" name="options" autocomplete="off">
                            </label>
                        </div>
                        <div class="hidden-xs col-sm-3 caption right" onclick="setAnswer(1, 3);">Disagree</div>
                    </div>
                    <div class="row fragen">
                        <p> Wie hat es dir gefallen? </p>
                        <div class="hidden-xs col-sm-3 caption left" onclick="setAnswer(2, -3);">Agree</div>
                        <div class="col-sm-6 col-xs-12" data-toggle="buttons" role="group" aria-label="Options">
                            <label class="btn agree max" onclick="setAnswer(2, -3);">
                                <input type="radio" name="options" autocomplete="off">
                            </label>
                            <label class="btn agree med" onclick="setAnswer(2, -2);">
                                <input type="radio" name="options" autocomplete="off">
                            </label>
                            <label class="btn agree min" onclick="setAnswer(2, -1);">
                                <input type="radio" name="options" autocomplete="off">
                            </label>
                            <label class="btn neutral" onclick="setAnswer(2, 0);">
                                <input type="radio" name="options" autocomplete="off">
                            </label>
                            <label class="btn disagree min" onclick="setAnswer(2, 1);">
                                <input type="radio" name="options" autocomplete="off">
                            </label>
                            <label class="btn disagree med" onclick="setAnswer(2, 2);">
                                <input type="radio" name="options" autocomplete="off">
                            </label>
                            <label class="btn disagree max" onclick="setAnswer(2, 3);">
                                <input type="radio" name="options" autocomplete="off">
                            </label>
                        </div>
                        <div class="hidden-xs col-sm-3 caption right" onclick="setAnswer(2, 3);">Disagree</div>
                    </div>
                    <div class="row fragen">
                        <p> Wie hat es dir gefallen? </p>
                        <div class="hidden-xs col-sm-3 caption left" onclick="setAnswer(3, -3);">Agree</div>
                        <div class="col-sm-6 col-xs-12" data-toggle="buttons" role="group" aria-label="Options">
                            <label class="btn agree max" onclick="setAnswer(3, -3);">
                                <input type="radio" name="options" autocomplete="off">
                            </label>
                            <label class="btn agree med" onclick="setAnswer(3, -2);">
                                <input type="radio" name="options" autocomplete="off">
                            </label>
                            <label class="btn agree min" onclick="setAnswer(3, -1);">
                                <input type="radio" name="options" autocomplete="off">
                            </label>
                            <label class="btn neutral" onclick="setAnswer(3, 0);">
                                <input type="radio" name="options" autocomplete="off">
                            </label>
                            <label class="btn disagree min" onclick="setAnswer(3, 1);">
                                <input type="radio" name="options" autocomplete="off">
                            </label>
                            <label class="btn disagree med" onclick="setAnswer(3, 2);">
                                <input type="radio" name="options" autocomplete="off">
                            </label>
                            <label class="btn disagree max" onclick="setAnswer(3, 3);">
                                <input type="radio" name="options" autocomplete="off">
                            </label>
                        </div>
                        <div class="hidden-xs col-sm-3 caption right" onclick="setAnswer(3, 3);">Disagree</div>
                    </div>
                    <div class="row fragen">
                        <p> Wie hat es dir gefallen? </p>
                        <div class="hidden-xs col-sm-3 caption left" onclick="setAnswer(4, -3);">Agree</div>
                        <div class="col-sm-6 col-xs-12" data-toggle="buttons" role="group" aria-label="Options">
                            <label class="btn agree max" onclick="setAnswer(4, -3);">
                                <input type="radio" name="options" autocomplete="off">
                            </label>
                            <label class="btn agree med" onclick="setAnswer(4, -2);">
                                <input type="radio" name="options" autocomplete="off">
                            </label>
                            <label class="btn agree min" onclick="setAnswer(4, -1);">
                                <input type="radio" name="options" autocomplete="off">
                            </label>
                            <label class="btn neutral" onclick="setAnswer(4, 0);">
                                <input type="radio" name="options" autocomplete="off">
                            </label>
                            <label class="btn disagree min" onclick="setAnswer(4, 1);">
                                <input type="radio" name="options" autocomplete="off">
                            </label>
                            <label class="btn disagree med" onclick="setAnswer(4, 2);">
                                <input type="radio" name="options" autocomplete="off">
                            </label>
                            <label class="btn disagree max" onclick="setAnswer(4, 3);">
                                <input type="radio" name="options" autocomplete="off">
                            </label>
                        </div>
                        <div class="hidden-xs col-sm-3 caption right" onclick="setAnswer(4, 3);">Disagree</div>
                    </div>
                    <div class="row fragen">
                        <p> sonst noch was? </p>
                        <textarea  type="text" class="form-control" placeholder="bitte nicht zu gemein sein ):"></textarea>
                    </div>
                    <input type="submit" value="Senden" id="submit">
                </form>
            </div>
        </div>
    </div>

Я получил код на этой стороне:
https://www.16personalities.com/free-personality-test (обратите внимание, что на этом сайте есть то, чего я хочу достичь)

заранее спасибо!

Комментарии:

1. добавьте имя в группу, например «name =»options1» другая строка «name =»options2»

Ответ №1:

Одним из основных принципов jQuery является ориентация на элементы dom с помощью селекторов, и вы также можете обновлять свойства. Если вы хотите получить дескриптор переключателя в вашей форме; он является примером, и здесь я также преобразую свойство, чтобы оно было проверено. $("input[name='options']").filter('.disagree.min input').prop('checked',true) Вы могли бы упростить таргетинг, указав идентификатор в своих входных тегах. Здесь я беру группу радио, используя атрибут ‘name’, а затем фильтрую ее, используя классы в теге label, а затем выбираю дочерний ввод. Как говорили другие. Переключатели группируются по имени ввода… итак, группа с общим именем … эти кнопки будут переключаться так, чтобы была выбрана только одна. Вот пример этого кода. https://jsfiddle.net/ecropolis/uLz3kmdb /

Ответ №2:

измените имя во втором наборе переключателей.

От:

 <input type="radio" name="options" autocomplete="off">

к чему-то еще:

 <input type="radio" name="options-different" autocomplete="off">