Jquery click method only works once in my Quiz

Jquery click method only works once in my Quiz - javascript

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;

Related

showing different radio buttons when choosing specific button

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();
}
});
});

likert scale toggle effect missing-Bootstrap with Blaze Meteor

I have the following html displaying a scale 1-5, I get the value that is clicked but it seems as it does not toggle or change the color when a number is clicked it only changes the color temporarily as shown in file attached
<div class="row">
<div class="btn-toolbar mr-2" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group" role="group" aria-label="likert group">
<div class="btn-group btn-group-toggle mr-2" data-toggle="buttons">
<a class="btn btn-link disabled ml-5" disabled>Totally Not</a>
<label class="btn btn-success" >
<input type="radio" name="likert" value="1" autocomplete="off">1
</label>
<label class="btn btn-success ">
<input type="radio" name="likert" value="2" autocomplete="off">2
</label>
<label class="btn btn-success ">
<input type="radio" name="likert" value="3" autocomplete="off">3
</label>
<label class="btn btn-success ">
<input type="radio" name="likert" value="4" autocomplete="off">4
</label>
<label class="btn btn-success ">
<input type="radio" name="likert" value="5" autocomplete="off">5
</label>
<a class="btn btn-link disabled" disabled>Very Much</a>
</div>
</div>
</div>
</div>
How can I make it maintain the toggle effect once it is selected?Is there something missing from the above code ?
(I use Meteor Blaze framework with Bootstrap 4)

The solution was to add the below javascript file of npm module in meteor js file
import 'bootstrap/dist/js/bootstrap.bundle'

Using multiple bootstrap buttongroups in one page

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>

How to automatically check a radio button based on another?

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>

How to clear all radio button with same name . I want to pass name as variable

How to clear all radio button with same name using a button click. whole page is generated dynamically by php so i can't use constant name or id but name and id can formed by getting button id.
I am new to jquery and started working tonight in jquery and very frustrated.
<div style="height: 425px">
<!----------------------------------- Single Question Panel Start ------------------------------------------->
<div style="display: block" class="question" id="1">
<div style="height: 405px;">
<p>
Q1. Who is current Prime Minister of India?
</p>
<div class="radio">
<label> <input type="radio" class="radio" name="q1" id="q1"
value="male">Narendra Modi</label>
</div>
<div class="radio">
<label> <input type="radio" class="radio" name="q1" id="q1" value="female">Arun
Jetli</label>
</div>
<div class="radio">
<label> <input type="radio" name="q1" class="radio" id="q1" value="female">Manmohan
Singh</label>
</div>
<div class="radio">
<label><input type="radio" name="q1" class="radio" id="q1" value="female">LalKrishna Aadwani</label>
</div>
</div>
<div class="form-group">
<button type="button" name="submit" id="mq1"
class="btn btn-info " disabled=disabled>Mark for Review
</button>
<!--</div>
<div class="form-group">-->
<button type="button" name="submit" id="fq1"
class="btn btn-success" disabled=disabled>Finalize
</button>
<!-- </div>
<div class="form-group">-->
<button type="button" name="clear" id="cq1"
class="btn btn-danger" disabled=disabled>Clear
</button>
<!--</div>
<div class="form-group">-->
<button type="button" name="submit" id="nq1" onclick="show_next('1')"
class="btn btn-primary">Next
</button>
</div>
</div>
<!----------------------------------- Single Question Panel End ------------------------------------------->
<!----------------------------------- Single Question Panel Start ------------------------------------------->
<div style="display: none" class="question" id="2">
<div style="height: 380px;">
<p>
Q2. Who is Second Prime Minister of India?
</p>
<div class="radio">
<label> <input type="radio" class="radio" name="q2" value="male">Narendra Modi</label>
</div>
<div class="radio">
<label> <input type="radio" name="q2" value="female">Arun Jetli</label>
</div>
<div class="radio">
<label> <input type="radio" name="q2" value="female">Manmohan Singh</label>
</div>
<div class="radio">
<label><input type="radio" name="q2" value="female">LalKrishna Aadwani</label>
</div>
</div>
<div class="form-group">
<button type="submit" name="mq2" id="mq2"
class="btn btn-info " disabled=disabled>Mark for Review
</button>
<!--</div>
<div class="form-group">-->
<button type="submit" name="fq2" id="fq2"
class="btn btn-success" disabled=disabled>Finalize
</button>
<!-- </div>
<div class="form-group">-->
<button type="submit" name="cq2" id="cq2"
class="btn btn-danger" disabled=disabled>Clear
</button>
<!--</div>
<div class="form-group">-->
<button type="button" name="submit" id="submit" onclick="show_next('2')"
class="btn btn-primary">Next
</button>
</div>
</div>
<!----------------------------------- Single Question Panel End ------------------------------------------->
<!----------------------------------- Single Question Panel Start ------------------------------------------->
<div style="display: none" class="question" id="3">
<div style="height: 380px;">
<p>
Q3. Who is Third Prime Minister of India?
</p>
<div class="radio">
<label> <input type="radio" class="radio r" name="q3" value="male">Narendra Modi</label>
</div>
<div class="radio">
<label> <input type="radio" name="q3" value="female">Arun Jetli</label>
</div>
<div class="radio">
<label> <input type="radio" name="q3" value="female">Manmohan Singh</label>
</div>
<div class="radio">
<label><input type="radio" name="q3" value="female">LalKrishna Aadwani</label>
</div>
</div>
<div class="form-group">
<button type="button" name="submit" id="submit"
class="btn btn-info " disabled=disabled>Mark for Review
</button>
<!--</div>
<div class="form-group">-->
<button type="button" name="fq3" id="fq3"
class="btn btn-success" disabled=disabled>Finalize
</button>
<!-- </div>
<div class="form-group">-->
<button type="button" name="cq3" id="cq3"
class="btn btn-danger" disabled=disabled>Clear
</button>
<!--</div>
<div class="form-group">-->
<button type="button" name="submit" id="submit" onclick="show_next('3')"
class="btn btn-primary">Next
</button>
</div>
</div>
<!----------------------------------- Single Question Panel End ------------------------------------------->
</div>
</div>
I think i can do if somehow i can pass the xyz as variable in. I saw this in other answers on stackoverflow.
$('input[name=xyz]').attr('checked',false);
if not , how can do.

You can pass name of the radio buttons in data attribute of the reset button
<button class="reset" data-name="q3">reset</button>
By the click, it will clear radio buttons which has the same name
DEMO
$('.reset').click(function() {
var name = $(this).data('name');
$('input[name=' + name + ']').prop('checked',false);
});

We Keep Coding

JavaScript is the programming language of the Web.

Jquery click method only works once in my Quiz - javascript

Related

showing different radio buttons when choosing specific button

likert scale toggle effect missing-Bootstrap with Blaze Meteor

Using multiple bootstrap buttongroups in one page

How to automatically check a radio button based on another?

How to clear all radio button with same name . I want to pass name as variable

Categories

Resources