У меня есть список вопросов, на которые пользователь должен ответить, каждый вопрос имеет 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}
заранее спасибо
Чтобы включить работу переключателя, вам нужно предоставить все параметры, для которых вам нужен только один ответ с тем же именем. Если вы переработали имена своих входов, я думаю, вам может не понадобиться 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 (или что-то в этом роде).