I have the following radio buttons values to be counted using JS function and gives score in the bottom, but I get the following error "Uncaught TypeError: radioElems.forEach is not a function at HTMLDocument.":
<div class="data">
<label>Assis<span class="red_star">*</span></label>
<span><input type="radio" class="radio" name="Assis" value="0" required> 0</span>
<span><input type="radio" class="radio" name="Assis" value="1" required> 1</span>
<span><input type="radio" class="radio" name="Assis" value="2" required> 2</span>
<span><input type="radio" class="radio" name="Assis" value="3" required> 3</span>
</div>
<div class="data">
<label>En train<span class="red_star">*</span></label>
<span><input type="radio" class="radio" name="En_train" value="0" required> 0</span>
<span><input type="radio" class="radio" name="En_train" value="1" required> 1</span>
<span><input type="radio" class="radio" name="En_train" value="2" required> 2</span>
<span><input type="radio" class="radio" name="En_train" value="3" required> 3</span>
</div>
<div class="score"><span>Score: </span><span id="resultScore">0</span></div>
//Javascript
document.addEventListener( 'DOMContentLoaded', event => {
const text = document.getElementById('resultScore')
const radioElems = document.getElementsByClassName('radio')
radioElems.forEach((radioElem) => { radioElem.addEventListener('change', () => {
count()
}) })
const count = () => {
let score = 0
document.getElementsByClassName('["radio"]:checked').forEach(radioChecked => {
score += parseInt(radioChecked.value, 10)
text.innerHTML = score
})
}
})
<div class="data">
<label>Assis en train de lire<span class="red_star">*</span></label>
<span><input type="radio" class="radio" name="Assis" value="0" required> 0</span>
<span><input type="radio" class="radio" name="Assis" value="1" required> 1</span>
<span><input type="radio" class="radio" name="Assis" value="2" required> 2</span>
<span><input type="radio" class="radio" name="Assis" value="3" required> 3</span>
</div>
<div class="data">
<label>En train de regarder la télévision<span class="red_star">*</span></label>
<span><input type="radio" class="radio" name="En_train" value="0" required> 0</span>
<span><input type="radio" class="radio" name="En_train" value="1" required> 1</span>
<span><input type="radio" class="radio" name="En_train" value="2" required> 2</span>
<span><input type="radio" class="radio" name="En_train" value="3" required> 3</span>
</div>
<div class="score"><span>Score: </span><span id="resultScore">0</span></div>
I changed the getElementsByClassName to querySelectorAll. querySelectorAll has the function forEach:
//Javascript
var text;
const count = () => {
let score = 0
document.querySelectorAll('input[class = "radio"]:checked').forEach(radioChecked => {
score += parseInt(radioChecked.value, 10);
});
text.innerHTML = score;
};
document.addEventListener('DOMContentLoaded', event => {
text = document.getElementById('resultScore');
const radioElems = document.querySelectorAll('input[class = "radio"]');
radioElems.forEach((radioElem) => {
radioElem.addEventListener('change', () => {
count();
})
})
});
<div class="data">
<label>Assis en train de lire<span class="red_star">*</span></label>
<span><input type="radio" class="radio" name="Assis" value="0" required> 0</span>
<span><input type="radio" class="radio" name="Assis" value="1" required> 1</span>
<span><input type="radio" class="radio" name="Assis" value="2" required> 2</span>
<span><input type="radio" class="radio" name="Assis" value="3" required> 3</span>
</div>
<div class="data">
<label>En train de regarder la télévision<span class="red_star">*</span></label>
<span><input type="radio" class="radio" name="En_train" value="0" required> 0</span>
<span><input type="radio" class="radio" name="En_train" value="1" required> 1</span>
<span><input type="radio" class="radio" name="En_train" value="2" required> 2</span>
<span><input type="radio" class="radio" name="En_train" value="3" required> 3</span>
</div>
<div class="score"><span>Score: </span><span id="resultScore">0</span></div>
Related
I have a bunch of checkbox items. When I click the checkbox, I want the disabled attribute to be removed from the button, allowing the button to be clicked and a total displayed.
I've attached calcButton.removeAttribute('disabled'); to the conditional, but it's not removing the disabled attribute from the button.
var calcButton = document.getElementById("calcButton");
if (document.getElementById("total")) {
calcTotal();
}
function calcTotal() {
var itemTotal = 0;
var items = document.getElementsByTagName("input");
for (var i = 0; i < 11; i++) {
if (items[i].checked) {
itemTotal += items[i].value * 1;
calcButton.removeAttribute('disabled');
}
document.getElementById("total").innerHTML = "Your order total is: $" + itemTotal + ".00";
}
}
var payOptions = document.getElementById('payOpts');
if (calcButton.addEventListener) {
calcButton.addEventListener("click", calcTotal, false);
} else if (calcButton.attachEvent) {
calcButton.attachEvent("onclick", calcTotal);
}
calcButton.addEventListener('click', function() {
payOptions.style.display = 'block';
})
form {
display: flex;
flex-direction: column;
}
form label {
margin: 5px 0;
}
button {
width: fit-content;
}
<form>
<label for="item1" class="container">Hamburger ($5.00)
<input type="checkbox" id="item1" value="5">
<span class="checkmark"></span>
</label>
<label for="item2" class="container">Hotdog ($5.00)
<input type="checkbox" id="item2" value="5">
<span class="checkmark"></span>
</label>
<label for="item3" class="container">Jumbo Hotdog ($7.00)
<input type="checkbox" id="item3" value="7">
<span class="checkmark"></span>
</label>
<label for="item4" class="container">Corndog ($4.00)
<input type="checkbox" id="item4" value="4">
<span class="checkmark"></span>
</label>
<label for="item5" class="container">Chicken Fingers ($6.00)
<input type="checkbox" id="item5" value="5">
<span class="checkmark"></span>
</label>
<label for="item6" class="container">Nachos ($4.00)
<input type="checkbox" id="item6" value="4">
<span class="checkmark"></span>
</label>
<label for="item7" class="container">French Fries ($3.00)
<input type="checkbox" id="item7" value="3">
<span class="checkmark"></span>
</label>
<label for="item8" class="container">Soft Pretzel ($3.00)
<input type="checkbox" id="item8" value="3">
<span class="checkmark"></span>
</label>
<label for="item9" class="container">Small Drink ($2.00)
<input type="checkbox" id="item9" value="2">
<span class="checkmark"></span>
</label>
<label for="item10" class="container">Large Drink ($4.00)
<input type="checkbox" id="item10" value="4">
<span class="checkmark"></span>
</label>
<label for="item11" class="container">Bottled Water ($3.00)
<input type="checkbox" id="item11" value="3">
<span class="checkmark"></span>
</label>
<p id="total" class="priceInfo"></p>
<button type="button" id="calcButton" disabled="disabled">Pay me this!</button>
<div class="pay-options" id="payOpts" style="display: none;">
<h4>Hello World</h4>
</div>
</form>
You're attaching the onclick on the disabled calcButton, and that doesn't work as it's disabled and can't enabled itself.
calcTotal is also called at the beginning, but there aren't options selected so the calcbutton won't be enabled also
See this example. If have added another button to show that removeAttribute is working well:
var calcButton = document.getElementById("calcButton");
if (document.getElementById("total")) {
calcTotal();
}
function calcTotal() {
var itemTotal = 0;
var items = document.getElementsByTagName("input");
for (var i = 0; i < 11; i++) {
if (items[i].checked) {
itemTotal += items[i].value * 1;
calcButton.removeAttribute('disabled');
}
document.getElementById("total").innerHTML = "Your order total is: $" + itemTotal + ".00";
}
}
var payOptions = document.getElementById('payOpts');
if (calcButton.addEventListener) {
calcButton.addEventListener("click", calcTotal, false);
} else if (calcButton.attachEvent) {
calcButton.attachEvent("onclick", calcTotal);
}
document.getElementById("realCalcButton").addEventListener("click", calcTotal, false);
calcButton.addEventListener('click', function() {
payOptions.style.display = 'block';
})
form {
display: flex;
flex-direction: column;
}
form label {
margin: 5px 0;
}
button {
width: fit-content;
}
<form>
<label for="item1" class="container">Hamburger ($5.00)
<input type="checkbox" id="item1" value="5">
<span class="checkmark"></span>
</label>
<label for="item2" class="container">Hotdog ($5.00)
<input type="checkbox" id="item2" value="5">
<span class="checkmark"></span>
</label>
<label for="item3" class="container">Jumbo Hotdog ($7.00)
<input type="checkbox" id="item3" value="7">
<span class="checkmark"></span>
</label>
<label for="item4" class="container">Corndog ($4.00)
<input type="checkbox" id="item4" value="4">
<span class="checkmark"></span>
</label>
<label for="item5" class="container">Chicken Fingers ($6.00)
<input type="checkbox" id="item5" value="5">
<span class="checkmark"></span>
</label>
<label for="item6" class="container">Nachos ($4.00)
<input type="checkbox" id="item6" value="4">
<span class="checkmark"></span>
</label>
<label for="item7" class="container">French Fries ($3.00)
<input type="checkbox" id="item7" value="3">
<span class="checkmark"></span>
</label>
<label for="item8" class="container">Soft Pretzel ($3.00)
<input type="checkbox" id="item8" value="3">
<span class="checkmark"></span>
</label>
<label for="item9" class="container">Small Drink ($2.00)
<input type="checkbox" id="item9" value="2">
<span class="checkmark"></span>
</label>
<label for="item10" class="container">Large Drink ($4.00)
<input type="checkbox" id="item10" value="4">
<span class="checkmark"></span>
</label>
<label for="item11" class="container">Bottled Water ($3.00)
<input type="checkbox" id="item11" value="3">
<span class="checkmark"></span>
</label>
<p id="total" class="priceInfo"></p>
<button type="button" id="realCalcButton">Calculate</button>
<button type="button" id="calcButton" disabled="disabled">Pay me this!</button>
<div class="pay-options" id="payOpts" style="display: none;">
<h4>Hello World</h4>
</div>
</form>
We have many radio input.
function showReferal() {
document.querySelector('#referral_code').classList.remove('d-none');
}
<div class="form-group row d-none" id="referral_code">
<label for="referral_code">Referral Code</label>
<div class="col-md-10">
<input id="referral_code" type="text" class="form-control" name="referral_code">
</div>
</div>
<input class="form-check-input" type="radio" name="familiar" id="google" value="1">
<input class="form-check-input" type="radio" name="familiar" id="friends" value="2">
<input class="form-check-input" type="radio" name="familiar" id="advertising" value="3">
<input class="form-check-input" type="radio" name="familiar" id="marketer" value="4" onclick="showReferal()">
And when I click on #marketer should show #referral_code.
When I click on advertising and google and friends , referral_code must be hidden. only marketer be show
Similar to Alex Kudryashev's answer, but you can use the built-in toggle method instead of writing an if statement.
function showReferal(show) {
var refCode = document.querySelector('#referral_code');
refCode.classList.toggle('d-none', !show);
}
.d-none {
display: none
}
<div class="form-group row d-none" id="referral_code">
<label for="referral_code">Referral Code</label>
<div class="col-md-10">
<input id="referral_code" type="text" class="form-control" name="referral_code">
</div>
</div>
<input class="form-check-input" type="radio" name="familiar" id="google" value="1" onclick="showReferal(false)">
<input class="form-check-input" type="radio" name="familiar" id="friends" value="2" onclick="showReferal(false)">
<input class="form-check-input" type="radio" name="familiar" id="advertising" value="3" onclick="showReferal(false)">
<input class="form-check-input" type="radio" name="familiar" id="marketer" value="4" onclick="showReferal(true)">
You need to call the function from each radio button.
function showReferal(show) {
var refCode = document.querySelector('#referral_code');
if (show) {
refCode.classList.remove('d-none');
} else if (refCode.classList.value.indexOf('d-none') === -1) {
refCode.classList.add('d-none');
}
}
.d-none {
display: none
}
<div class="form-group row d-none" id="referral_code">
<label for="referral_code">Referral Code</label>
<div class="col-md-10">
<input id="referral_code" type="text" class="form-control" name="referral_code">
</div>
</div>
<input class="form-check-input" type="radio" name="familiar" id="google" value="1" onclick="showReferal(false)">
<input class="form-check-input" type="radio" name="familiar" id="friends" value="2" onclick="showReferal(false)">
<input class="form-check-input" type="radio" name="familiar" id="advertising" value="3" onclick="showReferal(false)">
<input class="form-check-input" type="radio" name="familiar" id="marketer" value="4" onclick="showReferal(true)">
I have a multiple radio elements and the options are integer. For each radios, I'm getting the default option to sum up the total.
Then, on change event, I would like to sum or subtract the total based on selected option.
In javascript, I'm able to get the total, but don't know how to sum and subtract values on change. Hereunder my current markup and script:-
var sum = 0;
var $this;
$('.form-item input').each(function() {
$this = $(this);
if ($this[0].checked == true) {
sum += parseInt($this.val());
}
});
$('.form-item input').on('change', function() {
// addition and subtraction here
});
$('.total').html(sum);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="form-type-radio">
<strong>Question 1</strong>
<div class="form-item">
<input type="radio" id="radio-1" name="" value="1" class="form-radio" checked="checked">
<label class="option" for="radio-1">1</label>
</div>
<div class="form-item">
<input type="radio" id="radio-2" name="" value="2" class="form-radio">
<label class="option" for="radio-2">2</label>
</div>
<div class="form-item">
<input type="radio" id="radio-3" name="" value="3" class="form-radio">
<label class="option" for="radio-3">3</label>
</div>
</div>
<div class="form-type-radio">
<strong>Question 2</strong>
<div class="form-item">
<input type="radio" id="radio-1" name="" value="1" class="form-radio" checked="checked">
<label class="option" for="radio-1">1</label>
</div>
<div class="form-item">
<input type="radio" id="radio-2" name="" value="2" class="form-radio">
<label class="option" for="radio-2">2</label>
</div>
<div class="form-item">
<input type="radio" id="radio-3" name="" value="3" class="form-radio">
<label class="option" for="radio-3">3</label>
</div>
</div>
<div class="form-type-radio">
<strong>Question 3</strong>
<div class="form-item">
<input type="radio" id="radio-1" name="" value="1" class="form-radio" checked="checked">
<label class="option" for="radio-1">1</label>
</div>
<div class="form-item">
<input type="radio" id="radio-2" name="" value="2" class="form-radio">
<label class="option" for="radio-2">2</label>
</div>
<div class="form-item">
<input type="radio" id="radio-3" name="" value="3" class="form-radio">
<label class="option" for="radio-3">3</label>
</div>
</div>
<div class="total"><strong>Total:</strong><span>3</span></div>
Just call the adding in the change event of the radio button
Initialize the total inside change event so that you can make the change every time you select and unselect.
Note: Added name for each set of radio button so you can unselect and the setting of total in total span.
$('.form-item input').on('change', function() {
// addition and subtraction here
var $this;
var sum = 0;
$('.form-item input').each(function() {
$this = $(this);
if ($this[0].checked == true) {
sum += parseInt($this.val());
}
$('.total span').html(sum);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="form-type-radio">
<strong>Question 1</strong>
<div class="form-item">
<input type="radio" id="radio-1" name="samename" value="1" class="form-radio" checked="checked">
<label class="option" for="radio-1">1</label>
</div>
<div class="form-item">
<input type="radio" id="radio-2" name="samename" value="2" class="form-radio">
<label class="option" for="radio-2">2</label>
</div>
<div class="form-item">
<input type="radio" id="radio-3" name="samename" value="3" class="form-radio">
<label class="option" for="radio-3">3</label>
</div>
</div>
<div class="form-type-radio">
<strong>Question 2</strong>
<div class="form-item">
<input type="radio" id="radio-1" name="samename1" value="1" class="form-radio" checked="checked">
<label class="option" for="radio-1">1</label>
</div>
<div class="form-item">
<input type="radio" id="radio-2" name="samename1" value="2" class="form-radio">
<label class="option" for="radio-2">2</label>
</div>
<div class="form-item">
<input type="radio" id="radio-3" name="samename1" value="3" class="form-radio">
<label class="option" for="radio-3">3</label>
</div>
</div>
<div class="form-type-radio">
<strong>Question 3</strong>
<div class="form-item">
<input type="radio" id="radio-1" name="samename2" value="1" class="form-radio" checked="checked">
<label class="option" for="radio-1">1</label>
</div>
<div class="form-item">
<input type="radio" id="radio-2" name="samename2" value="2" class="form-radio">
<label class="option" for="radio-2">2</label>
</div>
<div class="form-item">
<input type="radio" id="radio-3" name="samename2" value="3" class="form-radio">
<label class="option" for="radio-3">3</label>
</div>
</div>
<div class="total"><strong>Total:</strong><span>3</span></div>
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
I need a way to show correct price for a product with selection options. Radio Box 1 has 4 products with different price ProductA=$10, ProductB=$20, ProductC=$30, ProductD=$40
Radio Box 2 has two options Male and Female
For female all products are always $10 regardless of Radio Box 1 selection. Price varies for men depending on product choice. I need to show price change dynamically with js.
http://jsfiddle.net/pe2gpp01/
<div><label class="product">Product</label>
<span>
<input name="category" type="radio" value="10">
<label>Product A</label>
<input name="category" type="radio" value="20">
<label>Product B</label>
<input name="category" type="radio" value="30">
<label>Product C</label>
<input name="category" type="radio" value="40">
<label>Product D</label>
</span></div>
<div>
<label class="gender">Gender</label>
<span>
<input name="gender" type="radio" value="">
<label>Male</label>
<input name="gender" type="radio" value="">
<label>Female</label>
</span></div>
<span>Price:</span>
DEMO
html
<div>
<label class="product">Product</label>
<span>
<input name="category" type="radio" value="10" >
<label>Product A</label>
<input name="category" type="radio" value="20" checked>
<label>Product B</label>
<input name="category" type="radio" value="30">
<label>Product C</label>
<input name="category" type="radio" value="40" >
<label>Product D</label>
</span></div>
<div>
<label class="gender">Gender</label>
<span>
<input name="gender" type="radio" value="male" checked>
<label>Male</label>
<input name="gender" type="radio" value="female">
<label>Female</label>
</span></div>
<span>Show Price: <span id="price"></span></span>
js
$(function() {
$('[type="radio"]').on('change', function() {
var price = $('[value="female"]')[0].checked
? 10
: $('[name="category"]:checked').val();
$('#price').text(price);
}).change();
});