jquery 2 набора радио-боксов, оба выбраны, но не с той же опцией

0

У меня есть список вопросов, на которые пользователь должен ответить, каждый вопрос имеет 2 ответа, один из которых "самый", а другой "наименее", они выбираются из группы из четырех возможностей, например:

В: Когда я работаю как часть команды, я:

Тщательно определил захватывающий ленивый

im пытается найти способ, который, когда пользователь выбирает "осторожный" для большинства вариантов, он/она не может затем выбрать один и тот же ответ для "наименее",

после выбора двух ответов сценарий отображает следующий вопрос, вот где я до сих пор, вопросы отображаются правильно, но пользователь может выбрать один и тот же ответ для "самых" и "наименее" вариантов, вот код:

    <div id="question1">
    <label>Question 1:</label>

    <p class="most">Most</p>
    <label for="q1m1"><input type="radio" class="opt1" name="q1m" id="q1m1" value="10"> Enthusiastic</label>
    <label for="q1m2"><input type="radio" class="opt2" name="q1m" id="q1m2" value="8"> Bold</label>
    <label for="q1m3"><input type="radio" class="opt3" name="q1m" id="q1m3" value="6"> Diplomatic</label>
    <label for="q1m4"><input type="radio" class="opt4" name="q1m" id="q1m4" value="1"> Content</label>


    <p class="least">Least</p>
    <label for="q1l1"><input type="radio" class="opt1" name="q1l" id="q1l1" value="3"> Enthusiastic</label>
    <label for="q1l2"><input type="radio" class="opt2" name="q1l" id="q1l2" value="5"> Bold</label>
    <label for="q1l3"><input type="radio" class="opt3" name="q1l" id="q1l3" value="6"> Diplomatic</label>
    <label for="q1l4"><input type="radio" class="opt4" name="q1l" id="q1l4" value="0"> Content</label>


    <div class="buttons">
        <div class="q1_submit">Next</div>
    </div><!-- .buttons -->

</div><!-- #question1 -->   

<div id="question2" style="display: none;">
    <label>Question 2:</label>

    <p class="most">Most</p>
    <label for="q2m1"><input type="radio" class="opt1" name="q2m" id="q2m1" value="10"> Careful</label>
    <label for="q2m2"><input type="radio" class="opt2" name="q2m" id="q2m2" value="7"> Determined</label>
    <label for="q2m3"><input type="radio" class="opt3" name="q2m" id="q2m3" value="6"> Convincing</label>
    <label for="q2m4"><input type="radio" class="opt4" name="q2m" id="q2m4" value="3"> Good-natured</label>

    <p class="least">Least</p>
    <label for="q2l1"><input type="radio" class="opt1" name="q2l" id="q2l1" value="1"> Careful</label>
    <label for="q2l2"><input type="radio" class="opt2" name="q2l" id="q2l2" value="3"> Determined</label>
    <label for="q2l3"><input type="radio" class="opt3" name="q2l" id="q2l3" value="6"> Convincing</label>
    <label for="q2l4"><input type="radio" class="opt4" name="q2l" id="q2l4" value="9"> Good-natured</label>


    <div class="buttons">
        <div class="q2_prev">Previous</div>
        <div class="q2_submit">Next</div>
    </div><!-- .buttons -->

</div><!-- #question2 -->

и вот jquery:

    $( ".q1_submit" ).click(function() {
    if($("input[name='q1m']::checked").length > 0 && $("input[name='q1l']::checked").length > 0){
        // go on with script
        $( "#question2" ).show( "slow" );
        $( "#question1" ).hide( "slow" );
     }else{
        // NOTHING IS CHECKED
        alert('Please chose one most and one least');
     }      
});

$( ".q2_prev" ).click(function() {
    $( "#question1" ).show( "slow" );
    $( "#question2" ).hide( "slow" );
});

так что я пытаюсь добиться, если классы каждой группы переключателей одинаковы, выведите ошибку проверки, есть ли способ добавить класс в оператор if в сценарии js? что-то вроде:

if ($ ("input [name = 'q1m']. class") == ($ ("input [name = 'q1l']. class") {ERROR} ELSE {CARRY ON}

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

Теги:
validation
radio-button

1 ответ

0

Чтобы включить работу переключателя, вам нужно предоставить все параметры, для которых вам нужен только один ответ с тем же именем. Если вы переработали имена своих входов, я думаю, вам может не понадобиться jQuery для управления вещами.

Я попробовал это:

  <label>Question 1:</label>

  <p class="most">Most</p>
  <label for="q1m1"><input type="radio" class="opt1"  name="q1-1" value="10"> Enthusiastic</label>
  <label for="q1m2"><input type="radio" class="opt2"  name="q1-2" value="8"> Bold</label>
  <label for="q1m3"><input type="radio" class="opt3"  name="q1-3" value="6"> Diplomatic</label>
  <label for="q1m4"><input type="radio" class="opt4"  name="q1-4" value="1"> Content</label>


  <p class="least">Least</p>
  <label for="q1l1"><input type="radio" class="opt1"  name="q1-1" value="3"> Enthusiastic</label>
  <label for="q1l2"><input type="radio" class="opt2"  name="q1-2" value="5"> Bold</label>
  <label for="q1l3"><input type="radio" class="opt3"  name="q1-3" value="6"> Diplomatic</label>
  <label for="q1l4"><input type="radio" class="opt4"  name="q1-4" value="0"> Content</label>

без javascript, и, когда я нажимаю "Самый смелый", то "Крайне смелый", "Мост" не установлен. Это то, что вам нужно?

Вы заметите, что я вынул параметр ID, который вы могли бы вернуть, если вам это нужно, но ключ здесь состоит в том, что Enthusiastic имеет одинаковое имя q1-1 для обоих входов, а Bold имеет одно и то же имя q1-2 для обоих входов.

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

То, что я здесь не рассматривал, - это любая проверка JS, чтобы убедиться, что все 4 категории получают ответ. Если вам это нужно, тогда будет некоторая простая проверка, чтобы убедиться, что у вас есть 4 проверенных ввода в вопросе div (или что-то в этом роде).

  • 0
    спасибо, но логика не верна, если я пойду по этому маршруту, так как я хочу, чтобы вы могли ответить только один за большинство и один за аренду, а не один вариант для каждого, я смотрю на отключение одного, если была нажата соответствующая опция думаю, это может быть лучшим способом сделать это
  • 0
    Ах, так что вам нужно (вроде) обе настройки изменить. Когда я нажимаю «выбрать самый восторженный», он не должен позволять мне выбирать какие-либо другие элементы в «большинстве» и не должен выбирать «наименее восторженный», верно?

Ещё вопросы

Сообщество Overcoder
Наверх
Меню