0

我有一个用户必须回答的问题列表，每个问题有 2 个答案，一个是“最多”，另一个是“最少”，这些是从一组 4 种可能性中选择的，例如：

问：作为团队的一员，我是：

细心 坚定 兴奋 懒惰

我试图找出一种方法，当用户为大多数选项选择“小心”时，他/她不能为“最少”选择相同的答案

一旦选择了 2 个答案，脚本就会显示下一个问题，这是我目前所处的位置，问题显示正确，但用户可以为“最多”和“最少”选项选择相同的答案，代码如下：

    <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" );
});

所以我想要实现的是，如果每组单选按钮的类相同，则会引发验证错误，有没有办法将类添加到 js 脚本中的 if 语句中？就像是：

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

提前致谢

4

1 回答 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-1Boldq1-2

而且...如果您走这条路，并且更改了名称，请确保更新表单处理程序，因为提交数据的结构会有所不同。

我在这里没有解决的是任何类型的 JS 验证，以确保所有 4 个类别都能得到答案。如果您也需要，那么将进行一些简单的检查，以确保您在问题 div （或类似的东西）中有 4 个检查输入。

于 2013-11-13T16:27:55.570 回答