【问题标题】:Validation on 2 radio groups jquery验证 2 个无线电组 jquery
【发布时间】:2017-04-06 20:38:59
【问题描述】:

我需要对 2 个无线电组进行验证的指导,我有一份包含 28 个问题和 2 组带有无线电输入的答案的问卷,问题是我想验证同一行中的答案在两者上不会相同答案,我附上截图,无效的答案用红色框起来。

我想通过jquery进行验证,希望有人能帮助我。

这是标记:

<input type="radio" name="most_option_1" id="q1_most_option_id_1" value="D">
<input type="radio" name="least_option_1" id="q1_least_option_id_1" value="C">

【问题讨论】:

    标签: jquery validation radio-button radio-group


    【解决方案1】:

    如果单选按钮名称相同,您将无法同时选择两者,只能选择其中一个。您只需确保问卷中的每一“行”对于两个单选按钮都有一个唯一的名称。无需 Javascript。

    类似:

    <table class="table table-striped">
    <thead>
      <th>#1</th>
      <th>Most</th>
      <th>Least</th>
    </thead>
    <tbody>
      <tr>
        <td>Enthusiastic</td>
        <td>
          <input type="radio" name="q1_enthusiastic" value="D"/>
        </td>
        <td>
          <input type="radio" name="q1_enthusiastic" value="C"/>
        </td>
      </tr>
       <tr>
        <td>Daring</td>
        <td>
          <input type="radio" name="q1_daring" value="D"/>
        </td>
        <td>
          <input type="radio" name="q1_daring" value="C"/>
        </td>
      </tr>
       <tr>
        <td>Diplomatic</td>
        <td>
          <input type="radio" name="q1_diplomatic" value="D"/>
        </td>
        <td>
          <input type="radio" name="q1_diplomatic" value="C"/>
        </td>
      </tr>
       <tr>
        <td>Satisfied</td>
        <td>
          <input type="radio" name="q1_satisfied" value="D"/>
        </td>
        <td>
          <input type="radio" name="q1_satisfied" value="C"/>
        </td>
      </tr>
    </tbody>
    </table>
    

    小提琴:

    https://jsfiddle.net/z1kcmwuq/1/

    【讨论】:

    • 确定:
    • 听起来您需要重新考虑您的标记,因为您没有按照预期的方式使用单选按钮,这将导致大量额外的 jquery 来验证单选按钮的用途默认情况下
    • 我认为使用 2 个不同的单选按钮可以比较每个问题的答案不会在同一行发生冲突。我不希望两个答案在同一行。
    • 正确,但您需要在一行中给它们相同的名称,这样它们将确保答案不会冲突。我已经更新了我的小提琴和答案
    • 也许我可以对每个组进行索引搜索,然后比较它们,不选择相同的索引号
    猜你喜欢
    • 2012-11-14
    • 2014-11-02
    • 2014-05-13
    • 1970-01-01
    • 1970-01-01
    • 2018-07-20
    • 1970-01-01
    • 1970-01-01
    • 2017-05-02
    相关资源
    最近更新 更多