以一种形式检查多个单选按钮
Posted
技术标签:
【中文标题】以一种形式检查多个单选按钮【英文标题】：Checking multiple radio buttons in one form 【发布时间】：2017-02-21 08:36:38 【问题描述】：如何检查不在同一行但在同一表单中的单选按钮？我想将此用作调查。
如果有办法解决这个问题，我绝对是 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（注意这个网站有我想要实现的）
提前致谢！
【问题讨论】：
在组上添加名称前 "name="options1" 其他行 "name="options2" 【参考方案1】：jQuery 的主要原则之一是使用选择器定位 dom 元素，您还可以更新属性。如果您想处理表单中的单选按钮；他是一个例子，在这里我也在转换属性以使其检查。 $("input[name='options']").filter('.disagree.min input').prop('checked',true) 您可以通过在输入标签上添加 id 来简化定位。在这里，我使用“名称”属性获取单选组，然后使用标签标签上的类对其进行过滤，然后选择子输入。正如其他人所说。单选按钮按输入名称分组......所以一个共享名称的组......这些按钮将切换，以便只选择一个。这是此代码的示例。 https://jsfiddle.net/ecropolis/uLz3kmdb/
【讨论】：
【参考方案2】：更改第二组单选按钮的名称。
来自：
<input type="radio" name="options" autocomplete="off">
到别的地方：
<input type="radio" name="options-different" autocomplete="off">
【讨论】：
以上是关于以一种形式检查多个单选按钮的主要内容，如果未能解决你的问题，请参考以下文章