Develop Reference

Why is my counter always equal to zero even after the correct radio button is pressed?

In my Javascript code, I increment the counter when the right radio button is checked but when I check in the console, the counter doesn't get updated after the correct radio button is checked. Even after I click the submit button which calls a function clicked() that displays the counter. The counter still remains zero. Is there a reason why it doesn't get updated. Here is my Java Script code:
var counter = 0;
if (document.getElementById('blue').checked) {
counter++;
}
if (document.getElementById('age3').checked) {
counter++;
}
if (document.getElementById('hobby2').checked) {
counter++;
}
if (document.getElementById('game3').checked) {
counter++;
}
if (document.getElementById('language4').checked) {
counter++;
}
function clicked() {
document.getElementById("result").innerHTML = "You got " + counter;
}
<h1>Quiz</h1>
<form>
<p>(1) What is my favourite Color?</p>
<input type="radio" id="blue" name="color" value="blue">
<label for="blue">blue</label><br>
<input type="radio" id="red" name="color" value="red">
<label for="red">red</label><br>
<input type="radio" id="green" name="color" value="green">
<label for="green">green</label><br>
<input type="radio" id="purple" name="color" value="purple">
<label for="purple">purple</label>
<br>
<p>(2) How Old am I?</p>
<input type="radio" id="age1" name="age" value="20">
<label for="age1">20</label><br>
<input type="radio" id="age2" name="age" value="22">
<label for="age2">22</label><br>
<input type="radio" id="age3" name="age" value="21">
<label for="age3">21</label><br>
<input type="radio" id="age4" name="age" value="23">
<label for="age4">23</label>
<br>
<p>(3) Which of the following is not of a hobby of mine?</p>
<input type="radio" id="hobby1" name="hobby" value="swimming">
<label for="hobby1">swimming</label><br>
<input type="radio" id="hobby2" name="hobby" value="soccer">
<label for="hobby2">soccer</label><br>
<input type="radio" id="hobby3" name="hobby" value="chess">
<label for="hobby3">chess</label><br>
<input type="radio" id="hobby4" name="hobby" value="coding">
<label for="hobby4">coding</label>
<br>
<p>(4) Which of the following is a game that I like?</p>
<input type="radio" id="game1" name="game" value="NBA">
<label for="game1">NBA</label><br>
<input type="radio" id="game2" name="game" value="FortNite">
<label for="game2">FortNite</label><br>
<input type="radio" id="game3" name="game" value="God of War">
<label for="game3">God of War</label><br>
<input type="radio" id="game4" name="game" value="Call of Duty">
<label for="game4">Call of Duty</label>
<p>(5) At what is my favourite language</p>
<input type="radio" id="language1" name="language" value="python">
<label for="language1">python</label><br>
<input type="radio" id="language2" name="language" value="Javascript">
<label for="language2">Javascript</label><br>
<input type="radio" id="language3" name="language" value="C++">
<label for="language3">C++</label><br>
<input type="radio" id="language4" name="language" value="Java">
<label for="language4">Java</label><br><br>
</form>
<button onclick="clicked()">Submit</button>
<p id="result"> </p>

Put all those radio button checkings into a function and call that function when you hit submit. This should solve your problem.
var counter = 0;
function updateCounter(){
if (document.getElementById('blue').checked) {
counter++;
}
if (document.getElementById('age3').checked) {
counter++;
}
if (document.getElementById('hobby2').checked) {
counter++;
}
if (document.getElementById('game3').checked) {
counter++;
}
if (document.getElementById('language4').checked) {
counter++;
}
}
function clicked() {
updateCounter()
document.getElementById("result").innerHTML = "You got " + counter;
//reset the counter back to zero after displaying score
counter = 0
}
<h1>Quiz</h1>
<form>
<p>(1) What is my favourite Color?</p>
<input type="radio" id="blue" name="color" value="blue">
<label for="blue">blue</label><br>
<input type="radio" id="red" name="color" value="red">
<label for="red">red</label><br>
<input type="radio" id="green" name="color" value="green">
<label for="green">green</label><br>
<input type="radio" id="purple" name="color" value="purple">
<label for="purple">purple</label>
<br>
<p>(2) How Old am I?</p>
<input type="radio" id="age1" name="age" value="20">
<label for="age1">20</label><br>
<input type="radio" id="age2" name="age" value="22">
<label for="age2">22</label><br>
<input type="radio" id="age3" name="age" value="21">
<label for="age3">21</label><br>
<input type="radio" id="age4" name="age" value="23">
<label for="age4">23</label>
<br>
<p>(3) Which of the following is not of a hobby of mine?</p>
<input type="radio" id="hobby1" name="hobby" value="swimming">
<label for="hobby1">swimming</label><br>
<input type="radio" id="hobby2" name="hobby" value="soccer">
<label for="hobby2">soccer</label><br>
<input type="radio" id="hobby3" name="hobby" value="chess">
<label for="hobby3">chess</label><br>
<input type="radio" id="hobby4" name="hobby" value="coding">
<label for="hobby4">coding</label>
<br>
<p>(4) Which of the following is a game that I like?</p>
<input type="radio" id="game1" name="game" value="NBA">
<label for="game1">NBA</label><br>
<input type="radio" id="game2" name="game" value="FortNite">
<label for="game2">FortNite</label><br>
<input type="radio" id="game3" name="game" value="God of War">
<label for="game3">God of War</label><br>
<input type="radio" id="game4" name="game" value="Call of Duty">
<label for="game4">Call of Duty</label>
<p>(5) At what is my favourite language</p>
<input type="radio" id="language1" name="language" value="python">
<label for="language1">python</label><br>
<input type="radio" id="language2" name="language" value="Javascript">
<label for="language2">Javascript</label><br>
<input type="radio" id="language3" name="language" value="C++">
<label for="language3">C++</label><br>
<input type="radio" id="language4" name="language" value="Java">
<label for="language4">Java</label><br><br>
</form>
<button onclick="clicked()">Submit</button>
<p id="result"> </p>

Every time you are getting the value as 0 as the login you written is not calling on clicking of radio button.
First thing Just defined the all radio button into a method like below.
function SelectValue () {
counter = 0;
if (document.getElementById('blue').checked)
{
counter++;
}
if (document.getElementById('age3').checked)
{
counter++;
}
if (document.getElementById('hobby2').checked)
{
counter++;
}
if (document.getElementById('game3').checked)
{
counter++;
}
if (document.getElementById('language4').checked)
{
counter++;
}
}
Now there is two way you can call.
Either call that method in each and every method like below.
<p>(1) What is my favourite Color?</p>
<input type="radio" id="blue" name="color" value="blue" onclick="clickmethodthod()">
<label for="blue">blue</label><br>
Write a logic of click and attached to all radio button.
let counter = 0;
const radios = document.querySelector('input[type="radio"]');
for(radio in radios) {
radios[radio].onclick = function() {
SelectValue ()
}
}
Let me know if you are getting any issue.

Clicked state; styling on groups of form controls

I have a group of radio controls in a form. Each one is wrapped in a <label> element for styling.
When the page loads, each label has a background color set on it via CSS.
I want a user to be able to click on any radio button from the group toggling it's parent <label> background color.
From a UX point of view, I need each checked control to have it's parent label background color toggled. I need this throughout the group of radio controls.
<form>
<label>
<input type="radio" name="question1">
</label>
<label>
<input type="radio" name="question1">
</label>
<label>
<input type="radio" name="question1">
</label>
<label>
<input type="radio" name="question2">
</label>
<label>
<input type="radio" name="question2">
</label>
<label>
<input type="radio" name="question2">
</label>
<label>
<input type="radio" name="question3">
</label>
<label>
<input type="radio" name="question3">
</label>
<label>
<input type="radio" name="question3">
</label>
My approach;
I'm aware one cant select a parent element using CSS so it's off to jQuery.
Using jQuery, I can apply some logic to the entire set of radio buttons like so:
$(':radio').each( function (i, el) {
$(this).on('change', function(){
if($(this).is(':checked')){
$(this).parent().css('background', '#ba9bc9');
}
$(this).on('blur', function(){
$(this).parent().css('background', '#09afed');
});
});
});
This works, however it only works for the current element selected. Clicking away loses focus. I need it to maintain state throughout the entire set of questions. So questions #1 - #3 could all end up with coloured backgrounds potentially.

You can find the radios with the same name, and remove the class from them, before adding the class to the radio that was clicked.
var $radios = $(':radio');
$radios.on('click', function(e){
$radios.filter('[name="'+ e.target.name +'"]').not(e.target).parent().removeClass('selected');
$(e.target).parent().addClass('selected');
});
.selected {
background-color: red; //or whatever
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
<input type="radio" name="question1">
</label>
<label>
<input type="radio" name="question1">
</label>
<label>
<input type="radio" name="question1">
</label>
<label>
<input type="radio" name="question2">
</label>
<label>
<input type="radio" name="question2">
</label>
<label>
<input type="radio" name="question2">
</label>
<label>
<input type="radio" name="question3">
</label>
<label>
<input type="radio" name="question3">
</label>
<label>
<input type="radio" name="question3">
</label>

If you are able and willing to refacter your code you can do this purely with css:
label {
background: #ccc;
}
[type="radio"]:checked+label {
background: #b00;
}
<form>
<input id="lbl01" type="radio" name="question1">
<label for="lbl01">01</label>
<input id="lbl02" type="radio" name="question1">
<label for="lbl02">02</label>
<input id="lbl03" type="radio" name="question1">
<label for="lbl03">03</label>
<br/>
<input id="lbl04" type="radio" name="question2">
<label for="lbl04">04</label>
<input id="lbl05" type="radio" name="question2">
<label for="lbl05">05</label>
<input id="lbl06" type="radio" name="question2">
<label for="lbl06">06</label>
<br/>
<input id="lbl07" type="radio" name="question3">
<label for="lbl07">07</label>
<input id="lbl08" type="radio" name="question3">
<label for="lbl08">08</label>
<input id="lbl09" type="radio" name="question3">
<label for="lbl09">09</label>
</form>

Selecting the closest input to adjust value

I have 3 input boxes, with radio buttons above each input box that fill in the values of the boxes. 5 Radio buttons for each box. Each box/button set should act independantly. They are created with the same classes and I adjust the value in the input boxes based on the radio button with the onclick radio button listener like so
document.getElementsByClassName('nyp-input')[0].value=this.value;
document.getElementsByClassName('nyp-input')[1].value=this.value;
document.getElementsByClassName('nyp-input')[2].value=this.value;
Which doesn't work because it adjusts all 3, but I need it to adjust only the closest input. I've tried the below
jQuery('input').closest('nyp').find('.nyp-input');
adj.value=this.value;
The full snippet in context
<div class="nyp" data-price="0" data-max-price="" >
<div class="price-wrapper">
<div class="donation-options">
<label for="nyp-suggested-1">
<input type="radio" name="nyp-suggested" value="20" id="nyp-suggested-1" onclick="
var adj = jQuery('input').closest('nyp').find('.nyp-input');
adj.value=this.value;
"> $20
</label>
<label for="nyp-suggested-2">
<input type="radio" name="nyp-suggested" value="50" id="nyp-suggested-2" onclick="document.getElementsByClassName('nyp-input')[0].value=this.value; document.getElementsByClassName('nyp-input')[1].value=this.value; document.getElementsByClassName('nyp-input')[2].value=this.value;"> $50
</label>
<label for="nyp-suggested-3">
<input type="radio" name="nyp-suggested" value="100" id="nyp-suggested-3" onclick="document.getElementsByClassName('nyp-input')[0].value=this.value; document.getElementsByClassName('nyp-input')[1].value=this.value; document.getElementsByClassName('nyp-input')[2].value=this.value;"> $100
</label>
<label for="nyp-suggested-4">
<input type="radio" name="nyp-suggested" value="500" id="nyp-suggested-4" onclick="document.getElementsByClassName('nyp-input')[0].value=this.value; document.getElementsByClassName('nyp-input')[1].value=this.value; document.getElementsByClassName('nyp-input')[2].value=this.value;"> $500
</label>
</div>
</div>
<label for="nyp">
Other ( $ ) </label>
<input id="nyp" name="nyp" type="text" value="0.00" title="nyp" class="input-text amount nyp-input text">
How can I get the closest nyp-input to adjust the value.

try this code
$(function(){
$('.nyp-radio').click(function(){
$(this).parents('.price-wrapper').children('[type="text"]').val($(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nyp" data-price="0" data-max-price="" >
<div class="price-wrapper">
<div class="donation-options">
<label for="nyp-suggested-1">
<input type="radio" class='nyp-radio' name="nyp-suggested" value="20" id="nyp-suggested-1" > $20
</label>
<label for="nyp-suggested-2">
<input type="radio" class='nyp-radio' name="nyp-suggested" value="50" id="nyp-suggested-2" > $50
</label>
<label for="nyp-suggested-3">
<input type="radio" class='nyp-radio' name="nyp-suggested" value="100" id="nyp-suggested-3" > $100
</label>
<label for="nyp-suggested-4">
<input type="radio" class='nyp-radio' name="nyp-suggested" value="500" id="nyp-suggested-4" > $500
</label>
</div>
<label for="nyp">
Other ( $ ) </label>
<input id="nyp" name="nyp" type="text" value="0.00" title="nyp" class="input-text amount nyp-input text">
</div>
<div class="nyp" data-price="0" data-max-price="" >
<div class="price-wrapper">
<div class="donation-options">
<label for="nyp-suggested-11">
<input type="radio" class='nyp-radio' name="nyp-suggested1" value="20" id="nyp-suggested-11" > $20
</label>
<label for="nyp-suggested-12">
<input type="radio" class='nyp-radio' name="nyp-suggested1" value="50" id="nyp-suggested-12" > $50
</label>
<label for="nyp-suggested-13">
<input type="radio" class='nyp-radio' name="nyp-suggested1" value="100" id="nyp-suggested-13" > $100
</label>
<label for="nyp-suggested-14">
<input type="radio" class='nyp-radio' name="nyp-suggested1" value="500" id="nyp-suggested-14" > $500
</label>
</div>
<label for="nyp">
Other ( $ ) </label>
<input id="nyp" name="nyp" type="text" value="0.00" title="nyp" class="input-text amount nyp-input text">
</div>

The problem you may have is that the 3 "input boxes" contain inputs with the same IDs (basically you have for example nyp-suggested-1 3 times). You should try and generate different IDs keeping the same name for each group, but distinct between groups -example:
group1:
<label for="nya1">
<input type="radio" name="nya" value="20" id="nya1" > $20
</label>
<label for="nya2">
<input type="radio" name="nya" value="50" id="nya2" > $50
</label>
<label for="nya3">
<input type="radio" name="nya" value="100" id="nya3" > $100
</label>
<label for="nya4">
<input type="radio" name="nya" value="500" id="nya4" > $500
</label>
group 2:
<label for="nyb1">
<input type="radio" name="nyb" value="20" id="nyb1" > $20
</label>
<label for="nyb2">
<input type="radio" name="nyb" value="50" id="nyb2" > $50
</label>
<label for="nyb3">
<input type="radio" name="nyb" value="100" id="nyb3" > $100
</label>
<label for="nyb4">
<input type="radio" name="nyb" value="500" id="nyb4" > $500
</label>
Then you can select based on group name in jquery and update using the same value.

how can we show/hide div tags using value of radio buttons in jquery or javascript?

hi i am very new to jquery and i am working on show and hide div tags using values of radio buttons. here is my HTML.
<div id="OwnVehicle" style="display:none">
<label>
<input type="radio" name="vehicleList" id="two" onclick="fuelList()" value="1" />Two Wheeler
</label>
<label>
<input type="radio" name="vehicleList" id="four" onclick="fuelList()" value="2" />Four Wheeler
</label>
</div>
<div id="TwoWheeler" style="display:none">
<label>
<input type="radio" name="TwoWheeler" value="6" />Electric
</label>
<label>
<input type="radio" name="TwoWheeler" value="7" />Petrol
</label>
</div>
<div id="FourWheeler" style="display:none">
<label>
<input type="radio" name="FourWheeler" value="1" />Electric
</label>
<label>
<input type="radio" name="FourWheeler" value="2" />Petrol
</label>
<label>
<input type="radio" name="FourWheeler" value="3" />Diesel
</label>
<label>
<input type="radio" name="FourWheeler" value="4" />CNG
</label>
<label>
<input type="radio" name="FourWheeler" value="5" />LPG
</label>
</div>
now i need help in writing a jquery code for showing the div tag with id = "two wheeler" when radio button value = 1 and div tag with id = "four wheeler" when radio button value = 2.
thnaks in advance.
sorry for anyone who couldnt understand my question.

try this one
function fuelList(val) {
var val = parseInt(val);
if (val == 1) {
$('#FourWheeler').hide();
$('#TwoWheeler').show();
} else {
$('#TwoWheeler').hide();
$('#FourWheeler').show();
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="OwnVehicle">
<label>
<input type="radio" name="vehicleList" id="two" onclick="fuelList(this.value)" value="1" />Two Wheeler
</label>
<label>
<input type="radio" name="vehicleList" id="four" onclick="fuelList(this.value)" value="2" />Four Wheeler
</label>
</div>
<div id="TwoWheeler" style="display:none">
<label>
<input type="radio" name="TwoWheeler" value="6" />Electric
</label>
<label>
<input type="radio" name="TwoWheeler" value="7" />Petrol
</label>
</div>
<div id="FourWheeler" style="display:none">
<label>
<input type="radio" name="FourWheeler" value="1" />Electric
</label>
<label>
<input type="radio" name="FourWheeler" value="2" />Petrol
</label>
<label>
<input type="radio" name="FourWheeler" value="3" />Diesel
</label>
<label>
<input type="radio" name="FourWheeler" value="4" />CNG
</label>
<label>
<input type="radio" name="FourWheeler" value="5" />LPG
</label>
</div>

Here is what you can do easily with JQuery
$(document).ready(function(){
$("input[name='vehicleList']").click(function(){
var selectedValue = $(this).val();
if(selectedValue === "1"){
$('#TwoWheeler').show();
$('#FourWheeler').hide();
}else{
$('#TwoWheeler').hide();
$('#FourWheeler').show();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="OwnVehicle">
<label>
<input type="radio" name="vehicleList" id="two" value="1" />Two Wheeler
</label>
<label>
<input type="radio" name="vehicleList" id="four" value="2" />Four Wheeler
</label>
</div>
<div id="TwoWheeler" style="display:none">
<label>
<input type="radio" name="TwoWheeler" value="6" />Electric
</label>
<label>
<input type="radio" name="TwoWheeler" value="7" />Petrol
</label>
</div>
<div id="FourWheeler" style="display:none">
<label>
<input type="radio" name="FourWheeler" value="1" />Electric
</label>
<label>
<input type="radio" name="FourWheeler" value="2" />Petrol
</label>
<label>
<input type="radio" name="FourWheeler" value="3" />Diesel
</label>
<label>
<input type="radio" name="FourWheeler" value="4" />CNG
</label>
<label>
<input type="radio" name="FourWheeler" value="5" />LPG
</label>
</div>

Yiu can try this working code:
function fuelList(_this){
var value=$(_this).attr("value");
$("#TwoWheeler").hide();
$("#FourWheeler").hide();
if(value=="1"){
$("#TwoWheeler").show();
}
else if(value=="2"){
$("#FourWheeler").show();
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="OwnVehicle">
<label>
<input type="radio" name="vehicleList" id="two" onclick="fuelList(this)" value="1" />Two Wheeler
</label>
<label>
<input type="radio" name="vehicleList" id="four" onclick="fuelList(this)" value="2" />Four Wheeler
</label>
</div>
<div id="TwoWheeler" style="display:none">
<label>
<input type="radio" name="TwoWheeler" value="6" />Electric
</label>
<label>
<input type="radio" name="TwoWheeler" value="7" />Petrol
</label>
</div>
<div id="FourWheeler" style="display:none">
<label>
<input type="radio" name="FourWheeler" value="1" />Electric
</label>
<label>
<input type="radio" name="FourWheeler" value="2" />Petrol
</label>
<label>
<input type="radio" name="FourWheeler" value="3" />Diesel
</label>
<label>
<input type="radio" name="FourWheeler" value="4" />CNG
</label>
<label>
<input type="radio" name="FourWheeler" value="5" />LPG
</label>
</div>

Assuming I understood the question correctly, and you want to hide a div when you check a radio button?
Here is an example of how that can be achieved:
HTML:
<input type="radio" name="euResident" id="euResidentYes" value="Yes" checked />
<label for="euResidentYes" class="radio">yes</label>
<input type="radio" name="euResident" id="euResidentNo" value="No" />
<label for="euResidentNo" class="radio">no</label>
<div id='div'>Hello World</div>
Javascript:
function switchVar() {
if($("#euResidentNo").prop("checked"))
$("#div").show();
else
$("#div").hide();
}
$(document).ready(function() {
switchVar();
$("input[name=euResident]").change(switchVar);
});
It is an example using Javascript as this is perfect to use for this.
Demo: http://jsfiddle.net/2Uj9F/169/

Here you go with jsfiddle https://jsfiddle.net/ym10add9/
$("input[type='radio']").change(function() {
$('div').hide();
$( '#' + $(this).attr('value')).show();
});

My first suggestion is to change your onclick="" to onchange="".
<input type="radio" name="vehicleList" id="four" onchange="fuelList(this)" value="2" class="radioButtons" />Four Wheeler
<script>
function fuelList(element)
{
var id = element.value;
if( id == 1)
{
$(".wheels")hide(); //hides all the elements with class = wheels
$("#twoWheelers")show(); //shows the div with id = twoWheelers
}
else if( id == 2 )
{
$(".wheels")hide(); //hides all the elements with class = wheels
$("#fourWheelers")show(); //shows the div with id = fourWheelers
}
}
</script>
and put a class to the div of your "twoWheeler" and "fourWheeler"
I just make it "wheels"
<div id="twoWheelers" class="wheels">
...
</div>
<div id="fourWheelers" class="wheels">
...
</div>

I wrote code as per you describe in your post. May be useful to solve your problem.
$(document).ready(function() {
$('input[type=radio][name=vehicleList]').change(function() {
if (this.value == '1') {
$("#FourWheeler").hide();
$("#TwoWheeler").show();
}
else if (this.value == '2') {
$("#FourWheeler").show();
$("#TwoWheeler").hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="vehicleList">
<label>
<input type="radio" name="vehicleList" id="two" value="1" />Two Wheeler
</label>
<label>
<input type="radio" name="vehicleList" id="four" value="2" />Four Wheeler
</label>
</div>
<h5>Output : </h5>
<div id="TwoWheeler" style="display:none">
<label>
<input type="radio" name="TwoWheeler" value="6" />Electric
</label>
<label>
<input type="radio" name="TwoWheeler" value="7" />Petrol
</label>
</div>
<div id="FourWheeler" style="display:none">
<label>
<input type="radio" name="FourWheeler" value="1" />Electric
</label>
<label>
<input type="radio" name="FourWheeler" value="2" />Petrol
</label>
<label>
<input type="radio" name="FourWheeler" value="3" />Diesel
</label>
<label>
<input type="radio" name="FourWheeler" value="4" />CNG
</label>
<label>
<input type="radio" name="FourWheeler" value="5" />LPG
</label>
</div>

Below is simple JQuery code that will help you to achieve your requirement:
$("input[name='vehicleList']").on('click', function() {
if ($(this).val() == 1) {
$('#TwoWheeler').show();
$('#FourWheeler').hide();
} else {
$('#TwoWheeler').hide();
$('#FourWheeler').show();
}
});
#TwoWheeler,
#FourWheeler {
display: none;
}
#OwnVehicle label,
#TwoWheeler label,
#FourWheeler label {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="OwnVehicle">
<label>
<input type="radio" name="vehicleList" id="two" value="1" />Two Wheeler
</label>
<label>
<input type="radio" name="vehicleList" id="four" value="2" />Four Wheeler
</label>
</div>
<div id="TwoWheeler">
<label>
<input type="radio" name="TwoWheeler" value="6" />Electric
</label>
<label>
<input type="radio" name="TwoWheeler" value="7" />Petrol
</label>
</div>
<div id="FourWheeler">
<label>
<input type="radio" name="FourWheeler" value="1" />Electric
</label>
<label>
<input type="radio" name="FourWheeler" value="2" />Petrol
</label>
<label>
<input type="radio" name="FourWheeler" value="3" />Diesel
</label>
<label>
<input type="radio" name="FourWheeler" value="4" />CNG
</label>
<label>
<input type="radio" name="FourWheeler" value="5" />LPG
</label>
</div>

This is one way to do it:
$( "#r0" ).bind( "click", function() {
$("#OwnVehicle").show();
$("#TwoWheeler").hide();
});
$( "#r1" ).bind( "click", function() {
$("#OwnVehicle").hide();
$("#TwoWheeler").show();
});
Here a working fiddle
https://jsfiddle.net/0aa8w2sj/
It can be improved

Generate a number for a form selected state

I am working on a product configurator with interdependencies and many options. I'm looking for a solution how to restore the selected state for the form without saving data on the server.
My idea:
the customer makes his choice with checkboxes and radio button on
the website (simple example: http://jsfiddle.net/benroe/6JRAm/5/)
customer print out the custom product with a short number at the
bottom ("configuration number")
the employee in the store types in the "configuration number" on the
website and same selected state (checkbox and radio button) are selected
But how to generate a short number for every possible unique states?
Simple example for the form:
<h1>Product Configurator</h1>
<form>
<p>
<label for="element_3">1: Size</label> <span><input id="element_3_1" name="element_3" class="element radio" type="radio" value="1"> <label class="choice" for="element_3_1">1m</label> <input id="element_3_2" name="element_3" class="element radio" type="radio" value="2"> <label class="choice" for="element_3_2">5m</label> <input id="element_3_3" name="element_3" class="element radio" type="radio" value="3"> <label class="choice" for="element_3_3">10m</label></span>
</p>
<p>
<label for="element_1">2: Color</label> <span><input id="element_1_1" name="element_1" class="element radio" type="radio" value="1"> <label class="choice" for="element_1_1">Green</label> <input id="element_1_2" name="element_1" class="element radio" type="radio" value="2"> <label class="choice" for="element_1_2">Blue</label> <input id="element_1_3" name="element_1" class="element radio" type="radio" value="3"> <label class="choice" for="element_1_3">Black</label></span>
</p>
<p>
<label for="element_2">3: Extra</label> <span><input id="element_2_1" name="element_2_1" class="element checkbox" type="checkbox" value="1"> <label class="choice" for="element_2_1">Special 1</label> <input id="element_2_2" name="element_2_2" class="element checkbox" type="checkbox" value="1"> <label class="choice" for="element_2_2">Special 2</label></span>
</p>
<p><input id="saveForm" class="button_text" type="submit" name="submit" value="Submit"></p>
</form>
<p>Configuration Number: <input type="text"></p>

Something like this? but adding the customer id:
http://jsfiddle.net/6JRAm/23/
$('#saveForm').click(function() {
var configuration='Clien_ID-' + $('input[type=radio]:checked,input[type=checkbox]:checked').map(function() {
return $(this).val();
}).get().join('-');
alert(configuration);
});