HenThai HenThai - 1 month ago 8
jQuery Question

Checking multiple radio buttons in one form

How can I check radio button that are NOT in the same row but the same form? I want to use this as survey.

I'm an absolute beginner on jQuery if there is a way to solve the problem with it.

Heres my code (I'm using 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>


I got the code on this side:

https://www.16personalities.com/free-personality-test (note that this site has what I want to achieve)

thanks in advance!

Answer

One of the main principals of jQuery is targeting dom elements using selectors and you can also updated properties. If you want to get a handle on a radio button in your form; he's an example, and here I'm also transforming the property to make it checked. $("input[name='options']").filter('.disagree.min input').prop('checked',true) You could make the targeting easier by putting an id on your inputs tags. Here I'm grabbing the radio group using the 'name' attribute and then filtering that using the classes on the label tag and then selecting the child input. As others have said. Radio buttons are grouped by the input name... so a group that shares a name... those buttons will toggle so that only one is selected. Here's an example of this code. https://jsfiddle.net/ecropolis/uLz3kmdb/