以一种形式检查多个单选按钮

时间:2016-10-12 13:48:14

标签: jquery html forms twitter-bootstrap radio-button

如何查看不在同一行但形状相同的单选按钮?我想用这个作为调查。

如果有办法解决问题,我是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(请注意,此网站有我想要实现的目标)

提前感谢!

2 个答案:

答案 0 :(得分:0)

更改第二组单选按钮中的名称。

从:

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

到其他地方:

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

答案 1 :(得分:0)

jQuery的主要原则之一是使用选择器定位dom元素,您还可以更新属性。如果您想要处理表单中的单选按钮;他就是一个例子,我在这里也改造了房产以进行检查。 $("input[name='options']").filter('.disagree.min input').prop('checked',true)您可以通过在输入标记上添加ID来简化定位。在这里,我使用&#39;名称&#39;抓住广播组。属性,然后使用label标签上的类过滤,然后选择子输入。正如其他人所说。单选按钮按输入名称分组...因此,共享名称的组...这些按钮将切换,以便只选择一个。这是这段代码的一个例子。 https://jsfiddle.net/ecropolis/uLz3kmdb/