I have two (2) forms(div : wizard form):
The first form(div) asks the user to check a radio button
The second form (div) is for verification if the user want to change something
The problem is in the second form:
How I can automatically check the same radio button in the second form that the user checked in the first form?
I have a radio button the choose between YES and NO.
So, If the user selects the YES button, I need the YES button checked automatically in the second form(div).
The code:
yes_no = $('input[name="test"]:checked').val();
alert(yes_no);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="step1">
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">Test </label>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default btn-on btn-xs" id="label_mobile_yes">
<input type="radio" name="test" class="test" id="yes" value="yes">YES</label>
<label class="btn btn-default btn-off btn-xs" id="label_mobile_no">
<input type="radio" name="test" class="test" id="no" value="test2">NO</label>
</div>
</div>
</div>
</div>
<div id="step2">
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">Test </label>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default btn-on btn-xs" id="label_mobile_yes">
<input type="radio" name="test" class="test" id="yes_yes" value="yes">YES</label>
<label class="btn btn-default btn-off btn-xs" id="label_mobile_no">
<input type="radio" name="test" class="test" id="no_no" value="test2">NO</label>
</div>
</div>
</div>
</div>
As per my understanding I have created a fiddler for the same and coding standard(HTML naming) is bad.
https://jsfiddle.net/t651ujm0/5/
$("input[name='test']").click(function(){
$("input[name='test1'][value='"+$(this).val()+"']").attr('checked', 'checked');
});
$(document).ready(function(){
$('#step1 input').on('change', function() {
alert($('input[name=test]:checked', '#step1').val());
if($('input[name=test]:checked', '#step1').val()=='yes')
{
$('#yes1').prop("checked", true);
}
else
{
$('#no1').prop("checked", true);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="step1">
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">Test </label>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default btn-on btn-xs" id="label_mobile_yes">
<input type="radio" name="test" class="test" id="yes" value="yes">YES</label>
<label class="btn btn-default btn-off btn-xs" id="label_mobile_no">
<input type="radio" name="test" class="test" id="no" value="test2">NO</label>
</div>
</div>
</div>
</div>
<div id="step2">
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">Test </label>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default btn-on btn-xs" id="label_mobile_yes">
<input type="radio" name="test1" class="test" id="yes1" value="yes">YES</label>
<label class="btn btn-default btn-off btn-xs" id="label_mobile_no">
<input type="radio" name="test1" class="test" id="no1" value="test2">NO</label>
</div>
</div>
</div>
</div>
Can do any of this...
$("#radio_1").prop("checked", true)
For versions of jQuery prior to 1.6, use:
$("#radio_1").attr('checked', 'checked');
$(document).ready(function(){
$('#form1 input').on('change', function() {
alert($('input[name=test]:checked', '#form1').val());
if($('input[name=test]:checked', '#form1').val()=='yes')
{
$('.'+$('input[name=test]:checked', '#form1').val(),'#form1').prop("checked", true);
}
else
{
$('.'+$('input[name=test]:checked', '#form1').val(),'#form1').prop("checked", true);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="form1" id="form1" >
<div class="div1">
<input type="radio" name="test" class="test" id="yes" value="yes">YES
<label class="btn btn-default btn-off btn-xs" id="label_mobile_no">
<input type="radio" name="test" class="test" id="no" value="no">NO</label>
</div>
<div class="div2">
<input type="radio" name="test1" class="yes" value="yes">YES
<label class="btn btn-default btn-off btn-xs" id="label_mobile_no">
<input type="radio" name="test1" class="no" value="no">NO</label>
</div >
</form>
I'd suggest something similar to the following approach, in which the elements are selected using a common custom, data-*, attribute which allows for simple selection and, having cached the collection, allows for easy filtering of that collection to target the appropriate elements to change.
Also, I've changed the name attributes a little into 'groups,' otherwise only one radio <input> from any number of elements sharing the same name property could be checked.
// caching the relevant elements, here we select <input> elements,
// of 'type=radio' which have a custom data-choice attribute:
var choices = $('input[type=radio][data-choice]');
// use the on() method to bind the anonymous function of the
// method as the event-handler for the 'change' event on
// those elements:
choices.on('change', function() {
// retrieving the value of the data-choice attribute
// dataset property of the changed element:
var choice = this.dataset.choice;
// filtering the cached collection of elements to those
// which have the 'data-choice' attribute which is equal
// to the value of the changed <input> element:
choices.filter('[data-choice=' + choice + ']')
// setting the 'checked' property of that element to the
// same state as the changed element:
.prop('checked', this.checked)
// this is just to visibly demonstrate the effectiveness
// and can be discarded in your use-case, however here
// we move to the parent elements of the retained
// <input> elements:
.parent()
// and add the 'checked' class to those parents:
.addClass('checked')
// selecting the sibling elements of those parents:
.siblings()
// and removing the 'checked' class:
.removeClass('checked');
});
label.checked {
color: limegreen;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="step1">
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">Test</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default btn-on btn-xs" id="label_mobile_yes">
<!-- note that I've removed the id attribute from the
radio <input> elements, since you can use alternative
custom attributes to select, and group, them; here
we use the 'data-choice' custom attribute, with the
(obvious) values of 'yes' and 'no' to reflect the
user-choice: -->
<input type="radio" name="testGroup1" class="test" data-choice="yes" value="yes">YES</label>
<label class="btn btn-default btn-off btn-xs" id="label_mobile_no">
<input type="radio" name="testGroup1" class="test" data-choice="no" value="test2">NO</label>
</div>
</div>
</div>
</div>
<div id="step2">
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">Test</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default btn-on btn-xs" id="label_mobile_yes">
<input type="radio" name="testGroup2" class="test" data-choice="yes" value="yes">YES</label>
<label class="btn btn-default btn-off btn-xs" id="label_mobile_no">
<input type="radio" name="testGroup2" class="test" data-choice="no" value="test2">NO</label>
</div>
</div>
</div>
</div>
References:
CSS:
Attribute-selectors.
jQuery:
addClass().
filter().
on().
removeClass().
parent().
prop().
siblings().
Details are commented in Snippet
SNIPPET
// When DOM content is ready
$(function() {
var no = $('input[name="test"][value="no"]');
var yes = $('input[name="test"][value="yes"]');
var neg = $('input[name="result"][value="neg"]');
var pos = $('input[name="result"][value="pos"]');
// Delegate the click event on [no] only
no.on('click', function(e) {
neg.prop('checked', true);
});
// Delegate the click event on [yes] only
yes.on('click', function(e) {
pos.prop('checked', true);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id='f1' name='f1'>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">Test</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default btn-on btn-xs" id="label_mobile_yes">
<input type="radio" name="test" class="test" id="yes" value="yes">YES</label>
<label class="btn btn-default btn-off btn-xs" id="label_mobile_no">
<input type="radio" name="test" class="test" id="no" value="no">NO</label>
</div>
</div>
</div>
</form>
<form id='f2' name='f2'>
<fieldset>
<legend>Form 2</legend>
<label>
<input type='radio' name='result' value='neg'>Neg</label>
<label>
<input type='radio' name='result' value='pos'>Pos</label>
</fieldset>
</form>
Related
when i click the active button a box should appear in the page , and when i click closed it should hide from page
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary ">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Open
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option2" autocomplete="off"> Closed
</label>
</div>
Use change event of radio button
$("input[name='options']").on('change',function(){
if($(this).attr('id') == 'option1'){
$('#myDiv').show();
}else{
$('#myDiv').hide();
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="height:100px" id="myDiv">MY DIV WILL BE HERE</div>
<body>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary ">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Open
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option2" autocomplete="off"> Closed
</label>
</div>
is that what you want ?
$(document).ready(function() {
$('input[name=options]').change(function(e) {
var isOpen = $(this).val() == "Open";
$('#box').toggle(isOpen);
});
});
#box {
padding-top: 15px;
}
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary ">
<input type="radio" name="options" value="Open" id="option1" autocomplete="off" checked> Open
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" value="Closed" id="option2" autocomplete="off"> Closed
</label>
</div>
<div id="box">More Info</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
You can use a bootstrap modal and modal button to open a box on a button click. if you want to make a custom button then here is the code for in jquery.
$(document).ready(function()
{
$("button.active").on("click",function()
{
$(".page-box").toggle();
//page-box is the box container which you want to open
})
});
I am trying to make radio buttons where person chose options and different options appear for him/her to chose from. my code is :
$(document).ready(function() {
$('input[type="radio"]').click(function() {
if($(this).attr('id') == 'wanted') {
$('.sec-row').show();
}
else {
$('.sec-row').hide();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form role="form" id="add_property" method="post" action="#">
<div class="card-body">
<div class="first-row form-group">
<label for="">Purpose</label>
<div class="btn-group btn-group-toggle ml-5">
<label class="btn bg-olive">
<input type="radio" name="options1" id="forSale" autocomplete="off"> For Sale
</label>
<label class="btn bg-olive">
<input type="radio" name="options1" id="rent" autocomplete="off"> Rent
</label>
<label class="btn bg-olive">
<input type="radio" name="options1" id="wanted" autocomplete="off"> Wanted
</label>
</div>
</div> <!-- /.first_row -->
<div class="sec-row form-group ml-3" style="display:none">
<label for="">Wanted For</label>
<div class="btn-group btn-group-toggle">
<label class="btn bg-olive">
<input type="radio" name="options2" id="wf-buy" autocomplete="off"> Buy
</label>
<label class="btn bg-olive">
<input type="radio" name="options2" id="wf-rent" autocomplete="off"> Rent
</label>
</div>
</div>
<div class="third-row form-group">
<label for="">Property Type</label>
<div class="btn-group btn-group-toggle">
<label class="btn bg-olive">
<input type="radio" name="options3" id="homes" autocomplete="off">Homes
</label>
<label class="btn bg-olive">
<input type="radio" name="options3" id="plots" autocomplete="off">Plots
</label>
<label class="btn bg-olive">
<input type="radio" name="options3" id="commercial" autocomplete="off">commercial
</label>
</div>
</div>
</div>
</form>
but the issue is I am not able to get active value when selecting certain radio button if I use data-toggle="buttons" in divs it works but js doesn't work that way. I need to make 2 or more lines of different radio buttons where they appear when some specific button is selected.
Use this code
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form role="form" id="add_property" method="post" action="#">
<div class="card-body">
<div class="first-row form-group">
<label for="">Purpose</label>
<div class="btn-group btn-group-toggle ml-5">
<label class="btn bg-olive">
<input type="radio" name="options1" id="forSale" autocomplete="off"> For Sale
</label>
<label class="btn bg-olive">
<input type="radio" name="options1" id="rent" autocomplete="off"> Rent
</label>
<label class="btn bg-olive">
<input type="radio" name="options1" id="wanted" autocomplete="off"> Wanted
</label>
</div>
</div> <!-- /.first_row -->
<div class="sec-row form-group ml-3" style="display:none">
<label for="">Wanted For</label>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn bg-olive">
<input type="radio" name="options4" id="wf-buy" autocomplete="off"> Buy
</label>
<label class="btn bg-olive">
<input type="radio" name="options5" id="wf-rent" autocomplete="off"> Rent
</label>
</div>
</div>
<div class="third-row form-group">
<label for="">Property Type</label>
<div class="btn-group btn-group-toggle">
<label class="btn bg-olive">
<input type="radio" name="options6" id="homes" autocomplete="off">Homes
</label>
<label class="btn bg-olive">
<input type="radio" name="options7" id="plots" autocomplete="off">Plots
</label>
<label class="btn bg-olive">
<input type="radio" name="options8" id="commercial" autocomplete="off">commercial
</label>
</div>
</div>
</div>
</form>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('input[type="radio"]').click(function() {
var radio_value=$(this).attr('id');
if(radio_value == 'wanted') {
$('.sec-row').show();
}else {
$('.sec-row').hide();
}
});
});
</script>
</html>
Use common name in radio button and pass value attribute too.
<div class="first-row form-group">
<label for="">Purpose</label>
<div class="btn-group btn-group-toggle ml-5">
<label class="btn bg-olive">
<input type="radio" name="purpose" value="forSale" id="forSale" autocomplete="off"> For Sale
</label>
<label class="btn bg-olive">
<input type="radio" name="purpose" value="rent" id="rent" autocomplete="off"> Rent
</label>
<label class="btn bg-olive">
<input type="radio" name="purpose" value="wanted" id="wanted" autocomplete="off"> Wanted
</label>
</div>
</div>
$(document).ready(function() {
$('input[type="radio"]').click(function() {
var value = $("input[name='purpose']:checked").val();
if(value == 'wanted') {
$('.sec-row').show();
}
else {
$('.sec-row').hide();
}
});
});
I am trying to create a rather complex scenario. I'm just a newbie trying to learn javascript.
When a user clicks value in option-1, the lesser value in option-2 must be disabled and moved to a higher value. For instance, if a user selects 15 in option-1, than 10 and 15 must be disabled in option-2. Then, it must auto move the selected value to 20.
Note that if a user selects 5 in option-1, he/she can select any higher value in option-2.
$('#option1 :radio').on('change', function() {
document.getElementById("value1").value = $(this).val();
document.getElementById("value2").value = $(this).val();
});
$('#option2 :radio').on('change', function() {
document.getElementById("value11").value = $(this).val();
document.getElementById("value12").value = $(this).val();
});
.container {
margin-top: 30px;
}
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
<h6>Option 1</h6>
<div id="option1" class="btn-group btn-group-toggle d-flex" data-toggle="buttons">
<label class="btn btn-primary w-100 active">
<input type="radio" name="options" value="5" id="option" autocomplete="off"> 5</label>
<label class="btn btn-primary w-100">
<input type="radio" name="options" value="10" id="option" autocomplete="off"> 10</label>
<label class="btn btn-primary w-100">
<input type="radio" name="options" value="15" id="option" autocomplete="off"> 15</label>
<label class="btn btn-primary w-100">
<input type="radio" name="options" value="20"id="option" autocomplete="off"> 20</label>
</div>
</div>
<div class="container">
<div class="form-group">
<input id="value1" value="5" class="form-control">
</div>
<div class="form-group">
<input id="value2" value="5" class="form-control">
</div>
</div>
<hr />
<div class="container">
<h6>Option 2</h6>
<div id="option2" class="btn-group btn-group-toggle d-flex" data-toggle="buttons">
<label class="btn btn-primary w-100 active">
<input type="radio" name="options" value="10" id="option" autocomplete="off"> 10</label>
<label class="btn btn-primary w-100">
<input type="radio" name="options" value="15" id="option" autocomplete="off"> 15</label>
<label class="btn btn-primary w-100">
<input type="radio" name="options" value="20" id="option" autocomplete="off"> 20</label>
<label class="btn btn-primary w-100">
<input type="radio" name="options" value="25"id="option" autocomplete="off"> 25</label>
</div>
</div>
<div class="container">
<div class="form-group">
<input id="value11" value="10" class="form-control">
</div>
<div class="form-group">
<input id="value12" value="10" class="form-control">
</div>
</div>
jsFiddle demo
You need to add a condition in the change event for the option1 elements where it takes the current value and compares it with values from the option2 and then adds the disable attribute to the lesser value than that selected.
You should change your code from this:
$('#option1 :radio').on('change', function() {
document.getElementById("value1").value = $(this).val();
document.getElementById("value2").value = $(this).val();
});
To this:
$('#option1 :radio').on('change', function() {
document.getElementById("value1").value = $(this).val();
document.getElementById("value2").value = $(this).val();
var baseValue = parseInt($(this).val());
var option2List = $('#option2 :radio').filter(function() {
return parseInt($(this).val()) <= baseValue; //getting only the values lesser to the current and equal to it
});
$('#option2 :radio').removeAttr('disabled');//resetting the option2
$('#option2 label').removeClass('disabled');//resetting the labels
option2List.prop('disabled', 'disabled'); //disabling the lesser values
//below code adds the disabled class to the labels
$.each(option2List,function(){
$(this).closest('label').addClass('disabled');
});
$('#option2 :radio:enabled').first().click();//selects the first enabled element
});
Let's say I would like to have 2 different button groups on my page.
<div class="btn-group fruits" role="group" aria-label="fruits" id="fruits">
<button type="button" name="fruits" class="btn btn-default">apple</button>
<button type="button" name="fruits" class="btn btn-default">cherry</button>
<button type="button" name="fruits" class="btn btn-default">melon</button>
</div>
<div class="btn-group vegetables" role="group" aria-label="vegetables" id="vegetables">
<button type="button" name="vegetables" class="btn btn-default">cucumber</button>
<button type="button" name="vegetables" class="btn btn-default">aubergine</button>
<button type="button" name="vegetables" class="btn btn-default">pepper</button>
</div>
Whenever I click on a button, the selected button on other group became deselected.
I have added, different "ids", "names", "classes" to each buttongroup and button. But unfortunately no success. How can I have multiple buttongroups on a page without affecting eachother?
All the examples on official bootstrap page are even like that. When you click on o buttongroup, other buttongroup deselected. Bootstrap Button Group
Thanks for any idea.
Here is what you can do.
Checkbox / Radio
Add data-toggle="buttons" to a .btn-group containing checkbox or radio inputs to enable toggling in their respective styles.
$('input').on('change', function () {
console.clear();
console.log(this.value)
})
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
body {
margin: 12px 0 0 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" name="options" value="left" autocomplete="off"> Left
</label>
<label class="btn btn-default">
<input type="radio" name="options" value="middle" autocomplete="off"> Middle
</label>
<label class="btn btn-default">
<input type="radio" name="options" value="right" autocomplete="off"> Right
</label>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-12 text-center">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" name="options" value="left 2" autocomplete="off"> Left 2
</label>
<label class="btn btn-default">
<input type="radio" name="options" value="middle 2" autocomplete="off"> Middle 2
</label>
<label class="btn btn-default">
<input type="radio" name="options" value="right 2" autocomplete="off"> Right 2
</label>
</div>
</div>
</div>
</div>
I'm making a simple quiz (in a style of one question at a time), this is the JS code:
$(document).ready(function(){
var item1 = document.getElementById('questionarea');
var item2 = document.getElementById('answers');
var totalQuestions = $('.questionarea').size();
var currentQuestion = 0;
$questions = $('.questionarea');
$questions.hide();
$(".btn-lg").click(function(){
$(this).hide();
$(".progress").show();
$(".answers").show();
$($questions.get(currentQuestion)).fadeIn();
});
$('.answers').click(function() {
$($questions.get(currentQuestion)).fadeOut(function () {
currentQuestion += 1;
$($questions.get(currentQuestion)).fadeIn();
});
});
});
And it works but only once! for the first question/answers. When I click on any of the button answers from the second question, nothing happens! It doesn't fade out and the third question never appears. What's the matter? Thanks in advance!
HTML:
<div class="col-lg-6 text-center">
<button type="button" class="btn btn-primary btn-lg text-center" id="start">Start quiz</button></div>
<!-- QUIZ AREA -->
<!-- QUESTION & ANSWERS 1 -->
<div class="questionarea QA1 text-center">
<ul class="col-lg-6 list-group text-center">
<p class="list-group-item question1">Q1: How did you and your BFF meet?</p>
</ul>
<br>
<div class="answers">
<div id="row divoption1">
<label class="btn btn-primary">
<input type="radio" name="options" id="option1"> At work </label></div>
<br>
<div id="row divoption2">
<label class="btn btn-primary">
<input type="radio" name="options" id="option2"> Living together</label></div>
<br>
<div id="row divoption3"><label class="btn btn-primary">
<input type="radio" name="options" id="option3"> Under unusual circumstances</label></div>
<br>
<div id="row divoption4">
<label class="btn btn-primary">
<input type="radio" name="options" id="option4"> In school</label></div></div>
</div>
<!-- QUESTION & ANSWERS 2 -->
<div class="questionarea QA2 text-center">
<ul class="col-lg-6 list-group text-center">
<p class="list-group-item question1">Q2: How would you describe your friendship?</p>
</ul>
<br>
<div class="answers">
<div id="row divoption1">
<label class="btn btn-primary">
<input type="radio" name="options" id="option1"> Needy </label></div>
<br>
<div id="row divoption2">
<label class="btn btn-primary">
<input type="radio" name="options" id="option2"> Amazing</label></div>
<br>
<div id="row divoption3"><label class="btn btn-primary">
<input type="radio" name="options" id="option3"> Deep</label></div>
<br>
<div id="row divoption4">
<label class="btn btn-primary">
<input type="radio" name="options" id="option4"> Family</label></div></div>
</div>
<!-- QUESTION & ANSWERS 3 -->
<div class="questionarea QA3 text-center">
<ul class="col-lg-6 list-group text-center">
<p class="list-group-item question1">Q3: What do you do together?</p>
</ul>
<br>
<div class="answers">
<div id="row divoption1">
<label class="btn btn-primary">
<input type="radio" name="options" id="option1"> Business </label></div>
<br>
<div id="row divoption2">
<label class="btn btn-primary">
<input type="radio" name="options" id="option2"> Go out</label></div>
<br>
<div id="row divoption3"><label class="btn btn-primary">
<input type="radio" name="options" id="option3"> Just hold each other</label> </div>
<br>
<div id="row divoption4">
<label class="btn btn-primary">
<input type="radio" name="options" id="option4"> Play pranks on each other</label></div></div>
</div>
<!-- QUESTION & ANSWERS 4 -->
<div class="questionarea QA4 text-center">
<ul class="col-lg-6 list-group text-center">
<p class="list-group-item question1">Q4: How often do you fight?</p>
</ul>
<br>
<div class="answers">
<div id="row divoption1">
<label class="btn btn-primary">
<input type="radio" name="options" id="option1"> Not much, but when we do, it's a big deal </label></div>
<br>
<div id="row divoption2">
<label class="btn btn-primary">
<input type="radio" name="options" id="option2"> We have lots of harmless tiffs</label></div>
<br>
<div id="row divoption3"><label class="btn btn-primary">
<input type="radio" name="options" id="option3"> Sometimes</label> </div>
<br>
<div id="row divoption4">
<label class="btn btn-primary">
<input type="radio" name="options" id="option4"> Play pranks on each other</label></div></div>
</div>
<!-- ---- -->
</div>
</body>
I created a JSFiddle with your code: https://jsfiddle.net/xr9d5rg1/ (if you can do it yourself the next time, would be very helpful :D )
There was something funky going on, I updated a couple things on the code:
1 - Updated .size() to .length, as it's been updated in the last jQuery version (ignore it if you're use a older jQuery version)
2 - Updated the click reference, from $('.answers') to $('.answers input'), so it doesn't accept clicks outside of radio boxes;
3 - Updated the reference to the question, such as the user 1252748 suggested;
It seems to be working properly now; Maybe there was some weird event trigger going on, that called the increment twice;