I have 10 questions each having 4 radio buttons as options. I want to validate whether all questions have a radio button checked. And call javascript function on submit button onclick.
Please help me with the javascript function.
Can i use a 2d elements to target each radio button in each question in the javascript function.Please resolve the javascript issue.running this javascript i can only target the questions using the 1d array.
function validateForm() {
var radios = document.getElementsByClassName("surveyQuestions");
var formValid = false;
var i = 0;
while (formValid == false && i < radios.length) {
if (radios[i].checked) formValid = true;
i++;
}
if (formValid == false) alert("Must Check Option !!");
}
<form class="forward">
<div class="surveyQuestions">
<label>2.Who is your Favorite Forward ? </label>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" >
<label class="form-check-label" for="exampleRadios1">
Lionel Messi
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
<label class="form-check-label" for="exampleRadios2">
Cristiano Ronaldo
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" >
<label class="form-check-label" for="exampleRadios3">
Neymar Jr
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios4" value="option4" >
<label class="form-check-label" for="exampleRadios3">
Mohammed Salah
</label>
</div>
</div>
</form>
<form class="midfielder">
<div class="surveyQuestions">
<label>3.Who is your favourite Midfielder? </label>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1">
<label class="form-check-label" for="exampleRadios1">
Toni Kroos
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
<label class="form-check-label" for="exampleRadios2">
Andreas Iniesta
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" >
<label class="form-check-label" for="exampleRadios3">
Kevin De Bruyne
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios4" value="option4" >
<label class="form-check-label" for="exampleRadios3">
Paul Pogba
</label>
</div>
</div>
</form>
<form class="defender">
<div class="surveyQuestions">
<label>4.Who is your Favorite Defender ? </label>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" >
<label class="form-check-label" for="exampleRadios1">
Sergio Ramos
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
<label class="form-check-label" for="exampleRadios2">
Gerard Pique
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" >
<label class="form-check-label" for="exampleRadios3">
Leonardo Bonucci
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios4" value="option4" >
<label class="form-check-label" for="exampleRadios3">
Thiago Silva
</label>
</div>
</div>
</form>
Maybe you need to use classes to your radios. For example:
<input type="radio" class="checkthis group_01" id="group_01_item_01">
<input type="radio" class="checkthis group_01" id="group_01_item_02">
<input type="radio" class="checkthis group_01" id="group_01_item_03">
<input type="radio" class="checkthis group_01" id="group_01_item_04">
<input type="radio" class="checkthis group_02" id="group_02_item_01">
// ...and so on
After this you can select all radios with .checkthis class, and a group by .group_01 class, and an item with id.
Now you can use jQuery to find a selected from a group, like this:
var object_array = $('.group_01').find(':checked');
if (object_array.length > 0) {
// you have a selected element
} else {
// there isn't selected element
}
UPDATED:
Without jQuery, only native JavaScript:
var object_array = document.body.querySelector('.group_01:checked');
The if statement is the same.
You can try something like
Just modify your function something like below
function validateForm() {
var totalQue = document.getElementsByClassName("surveyQuestions").length;
var selectedAns = document.querySelectorAll("input[type='radio']:checked").length;
if(totalQue != selectedAns){
alert("Must Check Option !!");
return false;
}
}
This will give you all radio buttons which are selected.
Related
i have a simple html form where i have like 50 questions, all the questions hasve ther own radio button options, something like below:
<h3 class="text-danger">1. Question 1</h3>
<input class="form-check-input" value="1" type="radio" name="q1" id="flexRadioDefault1">
<label class="form-check-label" for="flexRadioDefault1">
Option 1
</label>
<input class="form-check-input" type="radio" value="2" name="q1" id="flexRadioDefault1">
<label class="form-check-label" for="flexRadioDefault1">
Option 2 </label>
<h3 class="text-danger">2. Question 2</h3>
<input class="form-check-input" value="1" type="radio" name="q1" id="flexRadioDefault1">
<label class="form-check-label" for="flexRadioDefault1">
Option 1
</label>
<input class="form-check-input" type="radio" value="2" name="q1" id="flexRadioDefault1">
<label class="form-check-label" for="flexRadioDefault1">
Option 2 </label>
i want the user to complete all the questions,and only submit after completion, i did something like below:
$(function(){
$("input[type='radio']").change(function(){
$("input[type='submit']").prop("disabled", false);
});
});
<input type="submit" disabled="disabled"/>
however this is not accurate as the submit button enables if a user complete 1 question, can anyone please tell me how to accomplish this, thanks in advance
Make it simple by making one of the radio buttons selected
your code will look like
<h3 class="text-danger">1. Question 1</h3>
<input class="form-check-input" value="1" type="radio" name="q1" id="flexRadioDefault11" checked>
<label class="form-check-label" for="flexRadioDefault11">Option 1</label>
<input class="form-check-input" type="radio" value="2" name="q1" id="flexRadioDefaultq12">
<label class="form-check-label" for="flexRadioDefaultq12">Option 2 </label>
<h3 class="text-danger">2. Question 2</h3>
<input class="form-check-input" value="1" type="radio" name="q2" id="flexRadioDefaultq21" checked>
<label class="form-check-label" for="flexRadioDefaultq21"> Option 1 </label>
<input class="form-check-input" type="radio" value="2" name="q2" id="flexRadioDefaultq22">
<label class="form-check-label" for="flexRadioDefaultq22"> Option 2 </label>
$("#btn").on("click", function (e) {
e.preventDefault;
$(".radio").each(function (index) {
if (!$(this).is(":checked")) {
alert(index + "is uncheck");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" class="radio" />
<input type="radio" class="radio" />
<input type="radio" class="radio" />
<input type="radio" class="radio" />
<input type="radio" class="radio" />
<button id="btn">submit</button>
You need tu ose .each() method.
Each radio question should have a unique name so I changed them to q1,q2,q3. Even I added a wrapper for each question block. Whenever a question is answered, I loop each question block and check whether any block still remains unanswered. If any block(question) is unanswered, doEnable variable changes to false and loop break out.
$(function(){
$("input[type='radio']").change(function(){
let doEnable = true;
$(".form-check-input-wrap").each(function(){
if($(this).find("input[type='radio']:checked").length == 0){
doEnable = false;
return false;
}
});
if(doEnable) {
$("input[type='submit']").prop("disabled", false);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3 class="text-danger">1. Question 1</h3>
<div class="form-check-input-wrap">
<input class="form-check-input" value="1" type="radio" name="q1" id="flexRadioDefault11">
<label class="form-check-label" for="flexRadioDefault11">
Option 1
</label>
<input class="form-check-input" type="radio" value="2" name="q1" id="flexRadioDefault12">
<label class="form-check-label" for="flexRadioDefault12">
Option 2 </label>
</div>
<h3 class="text-danger">2. Question 2</h3>
<div class="form-check-input-wrap">
<input class="form-check-input" value="1" type="radio" name="q2" id="flexRadioDefault21">
<label class="form-check-label" for="flexRadioDefault21">
Option 1
</label>
<input class="form-check-input" type="radio" value="2" name="q2" id="flexRadioDefault22">
<label class="form-check-label" for="flexRadioDefault22">
Option 2 </label>
</div>
<h3 class="text-danger">3. Question 3</h3>
<div class="form-check-input-wrap">
<input class="form-check-input" value="1" type="radio" name="q3" id="flexRadioDefault31">
<label class="form-check-label" for="flexRadioDefault31">
Option 1
</label>
<input class="form-check-input" type="radio" value="2" name="q3" id="flexRadioDefault32">
<label class="form-check-label" for="flexRadioDefault32">
Option 2 </label>
</div>
<input type="submit" disabled="disabled"/>
P.S- There are other similar questions, but their methods show an error message
I have a form with multiple checkbox values. A user may select one or more than one options.
<input type="radio" id="DecisionA" class="DecisionType" name="DecisionType" value="d1">
<input type="radio" id="DecisionB" class="DecisionType" name="DecisionType" value="d2">
<input class="form-check-input DecisionComments" type="checkbox" name="decisionComments[]" value="1">
<label class="form-check-label" for="flexCheckDefault">Decision 1</label>
<input class="form-check-input DecisionComments" type="checkbox" name="decisionComments[]" value="2">
<label class="form-check-label" for="flexCheckDefault">Decision 2</label>
<input class="form-check-input DecisionComments" type="checkbox" name="decisionComments[]" value="3">
<label class="form-check-label" for="flexCheckDefault">Decision 3</label>
<input class="form-check-input DecisionComments" type="checkbox" name="decisionComments[]" value="4">
<label class="form-check-label" for="flexCheckDefault">Decision 4</label>
<input class="form-check-input DecisionComments" type="checkbox" name="decisionComments[]" value="other">
<label class="form-check-label" for="flexCheckDefault">Other Reasons</label>
<button class="submitDecision">Submit</button>
In JavaScript, I tried to send all the data onto another function as mentioned here.
$('.submitDecision').click(function(){
var decisionCheckboxes = new Array();
console.log(decisionCheckboxes);
var data = {};
data['DecisionType'] =$('input:radio[name=DecisionType]:checked').val();
$("input:checked").each(function() {
decisionCheckboxes.push($(this).val());
});
data['decisionComments']=decisionCheckboxes;
console.log(data);
saveDecision(data); -------------> saveDecision is the function
}
});
In the console, I am getting this, EVEN IF NO OPTION IS SELECTED
DecisionType:"3"
decisionComments: (9) ["1", "2", "3","4" ,"other", "on", "on", "on", "on", "on"]
Please tell me the problem
First, you are pushing all input rather than the only the checkbox. check below code.
$('.submitDecision').click(function(){
var decisionCheckboxes = [];
var data = {};
data['DecisionType'] =$('input:radio[name=DecisionType]:checked').val();
$("input.form-check-input:checked").each(function() {
if( $(this).val() == 'other' ){
console.log('conditions for other value');
}
decisionCheckboxes.push($(this).val());
});
data['decisionComments']=decisionCheckboxes;
console.log(data);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" id="DecisionA" class="DecisionType" name="DecisionType" value="d1">
<input type="radio" id="DecisionB" class="DecisionType" name="DecisionType" value="d2">
<input class="form-check-input DecisionComments" type="checkbox" name="decisionComments[]" value="1">
<label class="form-check-label" for="flexCheckDefault">Decision 1</label>
<input class="form-check-input DecisionComments" type="checkbox" name="decisionComments[]" value="2">
<label class="form-check-label" for="flexCheckDefault">Decision 2</label>
<input class="form-check-input DecisionComments" type="checkbox" name="decisionComments[]" value="3">
<label class="form-check-label" for="flexCheckDefault">Decision 3</label>
<input class="form-check-input DecisionComments" type="checkbox" name="decisionComments[]" value="4">
<label class="form-check-label" for="flexCheckDefault">Decision 4</label>
<input class="form-check-input DecisionComments" type="checkbox" name="decisionComments[]" value="other">
<label class="form-check-label" for="flexCheckDefault">Other Reasons</label>
<button class="submitDecision">Submit</button>
Based on below HTML snippet, manage to get two lines of radio button. When you click on the radio button on the first line, and then proceeds to click any of the radio button on the second line, the result of the radio button on the first line disappears.
How can I make sure, results of both lines of radio button appear together.
<!-- Start first Div -->
<div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
<label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
<label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
<label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</div>
</div>
<!-- End first Div -->
<!-- Start second Div -->
<div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio4" value="option1">
<label class="form-check-label" for="inlineRadio4">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio5" value="option2">
<label class="form-check-label" for="inlineRadio5">2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio6" value="option3" disabled>
<label class="form-check-label" for="inlineRadio6">3 (disabled)</label>
</div>
</div>
<!-- End Second Div -->
Thanks
John
As stated in the MDN documentation on radio buttons:
A radio group is defined by giving each of radio buttons in the group
the same name. Once a radio group is established, selecting any radio
button in that group automatically deselects any currently-selected
radio button in the same group.
So, if you want the second <div> radio buttons to be separate, you have to use a different name for that set of buttons:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- Start first Div -->
<div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
<label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
<label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
<label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</div>
</div>
<!-- End first Div -->
<!-- Start second Div -->
<div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions2" id="inlineRadio4" value="option1">
<label class="form-check-label" for="inlineRadio4">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions2" id="inlineRadio5" value="option2">
<label class="form-check-label" for="inlineRadio5">2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions2" id="inlineRadio6" value="option3" disabled>
<label class="form-check-label" for="inlineRadio6">3 (disabled)</label>
</div>
</div>
<!-- End Second Div -->
I am trying to get selected values of all the radio buttons and if one is not selected, then null value.
Here is my HTML code:
<div class="question m-2">
<div class="question-title">Question 1</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" value="a" name="q-1">Option a
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" value="b" name="q-1">Option b
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" value="c" name="q-1">Option c
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" value="d" name="q-1">Option d
</label>
</div>
</div>
<div class="question m-2">
<div class="question-title">Question 2</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" value="a" name="q-2">Option a
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" value="b" name="q-2">Option b
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" value="c" name="q-2">Option c
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" value="d" name="q-2">Option d
</label>
</div>
</div>
<div class="question m-2">
<div class="question-title">Question 3</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" value="a" name="q-3">Option a
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" value="b" name="q-3">Option b
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" value="c" name="q-3">Option c
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" value="d" name="q-3">Option d
</label>
</div>
</div>
I want to store all the answers of each question, if selected then the selected value, if not selected, then null value. Can anyone help me with jQuery code?
You can get the answers like this:
$("#submit").on("click", function() {
let questions = $(".question");
let answers = [];
let answer;
questions.each(function() {
if ($(this).find("input[type='radio']:checked").length) {
answer = $(this).find("input[type='radio']:checked").val();
} else {
answer = "null";
}
answers.push(answer);
});
console.log(answers);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="question m-2">
<div class="question-title">Question 1</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" value="a" name="q-1">Option a
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" value="b" name="q-1">Option b
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" value="c" name="q-1">Option c
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" value="d" name="q-1">Option d
</label>
</div>
</div>
<div class="question m-2">
<div class="question-title">Question 2</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" value="a" name="q-2">Option a
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" value="b" name="q-2">Option b
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" value="c" name="q-2">Option c
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" value="d" name="q-2">Option d
</label>
</div>
</div>
<div class="question m-2">
<div class="question-title">Question 3</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" value="a" name="q-3">Option a
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" value="b" name="q-3">Option b
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" value="c" name="q-3">Option c
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" value="d" name="q-3">Option d
</label>
</div>
</div>
<button id="submit">
Submit
</button>
You can get it with javascript as well
const questions = document.querySelectorAll('.question');
const answers = Array.from(questions).map(e => e.querySelector('input.form-
check - input: checked ').value);
In JQuery
const answers = $('.question input.form-check-input:checked').val();
By default the both reagent_code should be hidden. By selecting the radio button, have to show the appropriate DIV (following its #id).
function marketer(x) {
if (x == 0) {
document.getElementById('reagent_code').style.display = 'none';
} else if (x == 1) {
document.getElementById('reagent_code').style.display = 'block';
return;
}
}
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="marketer" id="yes" onclick="marketer(1)" value="1">
<label class="form-check-label" for="yes">Yes</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="marketer" id="no" onclick="marketer(0)" value="0">
<label class="form-check-label" for="no">No</label>
</div>
I get this error.
TypeError: marketer is not a function
make sure you do not use the same function names and elements names
use an event listener and toggle the element
jQuery
$("[name=marketer]").on("click", function() {
console.log(this.value)
$('#reagent_code').toggle(this.value == 1)
})
$("[name=marketer]:checked").click()
#Reagent {
display: none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="marketer" checked id="yes" value="1">
<label class="form-check-label" for="yes">Yes</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="marketer" id="no" value="0">
<label class="form-check-label" for="no">No</label>
</div>
<div id="reagent_code">Reagent</div>
Plain JS
[...document.querySelectorAll("[name=marketer]")].forEach(function(elem) {
elem.addEventListener("click", function() {
console.log(this.value)
document.getElementById('reagent_code').style.display = this.value === "0" ? 'none' : 'block';
})
if (elem.checked) {
elem.click();
}
})
#Reagent { display:none }
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="marketer" checked id="yes" value="1">
<label class="form-check-label" for="yes">Yes</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="marketer" id="no" value="0">
<label class="form-check-label" for="no">No</label>
</div>
<div id="reagent_code">Reagent</div>
Following suggestion of AvcS to your code, without any other library.
The function marketer should be defined on global scope, use window.marketer = function, if you are defining it inside a function
window.marketer = function(x) {
if (x == 0) {
document.getElementById('reagent_code').style.display = 'none';
} else if (x == 1) {
document.getElementById('reagent_code').style.display = 'block';
return;
}
}
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="marketer" id="yes" onclick="marketer(1)" value="1">
<label class="form-check-label" for="yes">Yes</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="marketer" id="no" onclick="marketer(0)" value="0">
<label class="form-check-label" for="no">No</label>
</div>
</div>
<div id='reagent_code'>
My amazing div
</div>
However, as suggested by Rory McCrossan, you should review your code.
Try This
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="marketer" id="yes" onclick="marketer(1)" value="1">
<label class="form-check-label" for="yes">Yes</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="marketer" id="no" onclick="marketer(0)" value="0">
<label class="form-check-label" for="no">No</label>
</div>
<!-- div to hide and show -->
<div id="div1" style="display: none;">
<h1>this is div 1 will show if yes</h1>
</div>
<div id="div2" style="display: none;">
<h1>this is div 2 will show if no</h1>
</div>
<script>
function marketer(x) {
if (x == 0) {
document.getElementById('div1').style.display = 'none';
document.getElementById('div2').style.display = 'block';
} else if (x == 1) {
document.getElementById('div1').style.display = 'block';
document.getElementById('div2').style.display = 'none';
return;
}
}
</script>
Try this simple code below :
$('input[type=radio]').change(function(){
if($(this).val() == 'ON') {
return $('.content').css('display', 'block');
}
return $('.content').css('display', 'none');
});
<input type="radio" name="radio" id="radio-1" value="ON" checked="">
<label for="radio-1">ON</label>
<input type="radio" name="radio" id="radio-2" value="OFF">
<label for="radio-2">OFF</label>
<div class="content">
Hello world.
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>