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)">
Related
I have no idea how to hide / show checkboxes depending on the choice based on the data-attribute (data-profession attribute).
Code: https://codepen.io/caqoga/pen/RwQyRaQ
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<div>
<div>
<h2>Select profession</h2>
<div>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="profession" value="1" data-profession="profession_1" id="profession1" checked="">
<label class="form-check-label" for="profession1">Security guard</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="profession" value="2" data-profession="profession_2" id="profession2">
<label class="form-check-label" for="profession2">Welder</label>
</div>
</div>
<h2>Expected salary</h2>
<div>
<div class="form-check profession_1">
<input class="form-check-input" type="checkbox" name="salary" value="1" data-profession="profession_1" id="salary1" checked="">
<label class="form-check-label" for="salary1">1000 EUR</label>
</div>
<div class="form-check profession_1">
<input class="form-check-input" type="checkbox" name="salary" value="2" data-profession="profession_1" id="salary2">
<label class="form-check-label" for="salary2">1500 EUR</label>
</div>
<div class="form-check profession_2">
<input class="form-check-input" type="checkbox" name="salary" value="3" data-profession="profession_2" id="salary3">
<label class="form-check-label" for="salary3">3500 EUR</label>
</div>
</div>
</div>
</div>
</div>
$( document ).ready(function() {
$('input[name="profession"]').change(function(){
if (!$(this).is(':checked')) {
$(this).prop('checked', true);
} else {
$(this).parent().siblings().find('input').prop('checked', false);
}
})
$('input[name="salary"]').change(function(){
if (!$(this).is(':checked')) {
$(this).prop('checked', true);
} else {
$(this).parent().siblings().find('input').prop('checked', false);
}
})
});
And now I would like to compare the data-profession in both inputs, if it is equal to or differs - depending on the .change - displaying or hiding the entire checkbox.
In this case, I would like only EUR 1000 and EUR 1500 for the Security Guard, and only EUR 3500 for the Welder.
Something like below:
$('input[name="profession"]').change(function(){
var idprof=$(this).attr('data-profession');
var idsalarytoprof=$('input[name="salary"]').attr('data-profession');
if (idprof == idsalarytoprof) {$('.proffesion_' + idsalarytoprof).show();}
else {$('.proffesion_' + idsalarytoprof).hide();}
});
$('input[name="profession"]').trigger('change');
Thank you for your help.
2 ways for requirement of you :
Disable input of other profession (unchecked)
Hide input of other profession (unchecked)
Code same as :
$('.example-1 input').change(function(){
let profession = $(this).data('profession')
if (!$(this).is(':checked')) {
$(this).prop('checked', true);
} else {
$(this).parent().siblings().find('input').prop('checked', false);
$('.' + profession).find('input').attr('disabled',false)
$('.' + profession).siblings(':not(.' + profession + ')').find('input').attr('disabled',true).prop('checked', false)
}
})
$('.example-2 input').change(function(){
let profession = $(this).data('profession')
if (!$(this).is(':checked')) {
$(this).prop('checked', true);
} else {
$(this).parent().siblings().find('input').prop('checked', false);
$('.' + profession).removeClass('hide').find('input').attr('disabled',false)
$('.' + profession).siblings(':not(.' + profession + ')').addClass('hide').find('input').attr('disabled',true).prop('checked', false)
}
})
.example-2 .hide {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div class="example-1">
<h2>Select profession</h2>
<div>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="profession" value="1" data-profession="profession_1" id="profession1" checked="">
<label class="form-check-label" for="profession1">Security guard</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="profession" value="2" data-profession="profession_2" id="profession2">
<label class="form-check-label" for="profession2">Welder</label>
</div>
</div>
<h2>Expected salary</h2>
<div>
<div class="form-check profession_1">
<input class="form-check-input" type="checkbox" name="salary" value="1" data-profession="profession_1" id="salary1">
<label class="form-check-label" for="salary1">1000 EUR</label>
</div>
<div class="form-check profession_1">
<input class="form-check-input" type="checkbox" name="salary" value="2" data-profession="profession_1" id="salary2">
<label class="form-check-label" for="salary2">1500 EUR</label>
</div>
<div class="form-check profession_2">
<input class="form-check-input" type="checkbox" name="salary" value="3" data-profession="profession_2" id="salary3" disabled>
<label class="form-check-label" for="salary3">3500 EUR</label>
</div>
</div>
</div>
<div class="example-2">
<h2>Select profession examle 2</h2>
<div>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="profession" value="1" data-profession="profession_11" id="profession11" checked="">
<label class="form-check-label" for="profession1">Security guard</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="profession" value="2" data-profession="profession_21" id="profession21">
<label class="form-check-label" for="profession2">Welder</label>
</div>
</div>
<h2>Expected salary examle 2</h2>
<div>
<div class="form-check profession_11">
<input class="form-check-input" type="checkbox" name="salary" value="1" data-profession="profession_11" id="salary11">
<label class="form-check-label" for="salary1">1000 EUR</label>
</div>
<div class="form-check profession_11">
<input class="form-check-input" type="checkbox" name="salary" value="2" data-profession="profession_11" id="salary21">
<label class="form-check-label" for="salary2">1500 EUR</label>
</div>
<div class="form-check profession_21 hide">
<input class="form-check-input" type="checkbox" name="salary" value="3" data-profession="profession_21" id="salary31">
<label class="form-check-label" for="salary3">3500 EUR</label>
</div>
</div>
</div>
</div>
In a Laravel Project, the Create Blade View contains some checkboxes. I have easily achieved the feature that, If the first checkbox is selected, the other checkbox will be disabled.
Create Blade View
<div class="form-group">
<label for="unit_price">Size</label>
<div class=" form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" name="size[]" value="0" >
<label class="form-check-label" for="inlineCheckbox1">0</label>
</div>
<div class=" form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" name="size[]" value="10" >
<label class="form-check-label" for="inlineCheckbox2">10</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" name="size[]" value="20">
<label class="form-check-label" for="inlineCheckbox3">20</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox4" name="size[]" value="30">
<label class="form-check-label" for="inlineCheckbox4">30</label>
</div>
</div>
jquery
$("#inlineCheckbox1").click(function() {
$(":checkbox").not(this).prop("disabled", this.checked);
});
But the problem occurs in the Edit Blade View.
Edit Blade View
<div class="form-group">
<label for="unit_price">Size</label>
<div class=" form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" name="size[]" value="0"
{{in_array("0",$size)?"checked":""}}>
<label class="form-check-label" for="inlineCheckbox1">0</label>
</div>
<div class=" form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" name="size[]" value="10"
{{in_array("10",$size)?"checked":""}}>
<label class="form-check-label" for="inlineCheckbox2">10</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" name="size[]" value="20"
{{in_array("20",$size)?"checked":""}}>
<label class="form-check-label" for="inlineCheckbox3">20</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox4" name="size[]" value="30"
{{in_array("30",$size)?"checked":""}}>
<label class="form-check-label" for="inlineCheckbox4">30</label>
</div>
</div>
In the edit view, the other checkboxes are not disabled though #inlineCheckbox1 was pre-selected. So, the other checkboxes seem clickable.
I want to achieve: the other checkboxes will always be disabled if #inlineCheckbox1 is checked.
try following js in your edit view
$(function(){
if($('#inlineCheckbox1').is(":checked"))
$(":checkbox").not($('#inlineCheckbox1')).prop("disabled", true);
})
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.
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
Basically I have a survey, where I want people to rank 5 items 1-5 based on importance.
Here is the HTML: http://jsfiddle.net/madcaesar/jj8ky/
<form>
<table>
<tr>
<th colspan="2" class="altTH" style="text-align:left">Please rank, in order of most important (1) to least important (5)</th>
</tr>
<tr>
<th><label>Professionalism (promoting the profession of medicine)</label></th>
<td>
<label style="display:inline"><input type="radio" name="Professionalism" value="1" class="checkbox"/> 1</label>
<label style="display:inline"><input type="radio" name="Professionalism" value="2" class="checkbox"/> 2</label>
<label style="display:inline"><input type="radio" name="Professionalism" value="3" class="checkbox"/> 3</label>
<label style="display:inline"><input type="radio" name="Professionalism" value="4" class="checkbox"/> 4</label>
<label style="display:inline"><input type="radio" name="Professionalism" value="5" class="checkbox"/> 5</label>
</td>
</tr>
<tr>
<th><label>Government Relations (state and federal government advocacy)</label></th>
<td>
<label style="display:inline"><input type="radio" name="GovernmentRelations" value="1" class="checkbox"/> 1</label>
<label style="display:inline"><input type="radio" name="GovernmentRelations" value="2" class="checkbox"/> 2</label>
<label style="display:inline"><input type="radio" name="GovernmentRelations" value="3" class="checkbox"/> 3</label>
<label style="display:inline"><input type="radio" name="GovernmentRelations" value="4" class="checkbox"/> 4</label>
<label style="display:inline"><input type="radio" name="GovernmentRelations" value="5" class="checkbox"/> 5</label>
</td>
</tr><tr>
<th><label>Education (e.g. CME, staff training, meetings)</label></th>
<td>
<label style="display:inline"><input type="radio" name="Education" value="1" class="checkbox"/> 1</label>
<label style="display:inline"><input type="radio" name="Education" value="2" class="checkbox"/> 2</label>
<label style="display:inline"><input type="radio" name="Education" value="3" class="checkbox"/> 3</label>
<label style="display:inline"><input type="radio" name="Education" value="4" class="checkbox"/> 4</label>
<label style="display:inline"><input type="radio" name="Education" value="5" class="checkbox"/> 5</label>
</td>
</tr>
<tr>
<th><label>Regulatory and legal analysis and support</label></th>
<td>
<label style="display:inline"><input type="radio" name="Regulatory" value="1" class="checkbox"/> 1</label>
<label style="display:inline"><input type="radio" name="Regulatory" value="2" class="checkbox"/> 2</label>
<label style="display:inline"><input type="radio" name="Regulatory" value="3" class="checkbox"/> 3</label>
<label style="display:inline"><input type="radio" name="Regulatory" value="4" class="checkbox"/> 4</label>
<label style="display:inline"><input type="radio" name="Regulatory" value="5" class="checkbox"/> 5</label>
</td>
</tr>
<tr>
<th><label>Communications (Iowa Medicine magazine, website, media relations, etc.)</label></th>
<td>
<label style="display:inline"><input type="radio" name="Communications" value="1" class="checkbox"/> 1</label>
<label style="display:inline"><input type="radio" name="Communications" value="2" class="checkbox"/> 2</label>
<label style="display:inline"><input type="radio" name="Communications" value="3" class="checkbox"/> 3</label>
<label style="display:inline"><input type="radio" name="Communications" value="4" class="checkbox"/> 4</label>
<label style="display:inline"><input type="radio" name="Communications" value="5" class="checkbox"/> 5</label>
</td>
</tr>
</table>
</form>
Is it possible with jQuery to make 1 unavailable once 1 has been selected once? and 2 once 2 has been selected and so forth? Right now they can select any number they want, and I can't figure out a way to do this.
What about something like this, where if you select a certain number, it unselects any others that have the same value?:
http://jsfiddle.net/jj8ky/2/
$("#radio_table").on("click", ".checkbox", function () {
var $this = $(this);
var all = $("#radio_table").find(".checkbox").not($this);
var val = $this.val();
if ($this.prop("checked") === true) {
all.filter(function () {
return $(this).val() === val;
}).prop("checked", false);
}
});
You can disable some radio when needed : ex
if($("#radio").val()==2) $("#otherRadio").attr("disabled",true);