We Keep Coding

How to show specific value when click on any radio button in console using JavaScript?

I am having difficulty to show a value of selected radio button. When I click on question 1 then result 1 should be display on console but I am getting all the values of radio button.Can anyone help me please? Thanks
html
<form onsubmit="return answers(event)">
<label>Question 1</label>
<input type="radio" class="question" value="1">
<label>Question 2</label>
<input type="radio" class="question" value="2">
<label>Question 3</label>
<input type="radio" class="question" value="3">
<button type="submit">Submit</button>
</form>
JavaScript
<script>
function answers(event)
{
var q = document.querySelectorAll('.question');
[...q].forEach(question =>{
console.log(question.value);
});
event.preventDefault();
}
</script>

You could check to see if it is checked with question.checked.
function answers(event)
{
var q = document.querySelectorAll('.question');
[...q].forEach(question =>{
if(question.checked){
console.log(question.value);
}
});
event.preventDefault();
}
You might also want to add names to all the radios, because the idea of radios is that only one of them can be ticked at a time. name does that for you:
<form onsubmit="return answers(event)">
<label>Question 1</label>
<input type="radio" class="question" value="1" name="question">
<label>Question 2</label>
<input type="radio" class="question" value="2" name="question">
<label>Question 3</label>
<input type="radio" class="question" value="3" name="question">
<button type="submit">Submit</button>
</form>

Instead of checking the checked property inside a loop. You could use the :checked pseudo-class to only select checked radios.
function answers(event)
{
var q = document.querySelectorAll('.question:checked');
[...q].forEach(question =>{
console.log(question.value);
});
event.preventDefault();
}
<form onsubmit="return answers(event)">
<label>Question 1</label>
<input type="radio" class="question" value="1" name="question">
<label>Question 2</label>
<input type="radio" class="question" value="2" name="question">
<label>Question 3</label>
<input type="radio" class="question" value="3" name="question">
<button type="submit">Submit</button>
</form>
Also be aware to use the name property to group radio buttons.

Multiple radio buttons controlgroups in jQuery mobile

I have the below html code
<fieldset id="a">
<input type="radio" name="choice1" value="1" radioatrr="0" class="myvalue1" /><label for="choice1">text 1</label>
<input type="radio" name="choice2" value="2" radioatrr="0" class="myvalue2" /><label for="choice2">text 2</label>
<input type="radio" name="choice3" value="3" radioatrr="0" class="myvalue3" /><label for="choice3">text 3</label>
</fieldset>
<fieldset id="b">
<input type="radio" name="cb-choice1" value="4" radioatrr="1" class="myvalue4" /><label for="cb-choice1">text 4</label>
<input type="radio" name="cb-choice2" value="5" radioatrr="1" class="myvalue5" /><label for="cb-choice2">text 5</label>
</fieldset>
I want if choice2 is checked and one of cb-choice1 or cb-choice2 then the received value is the value of cb-... choice (4 or 5) if choice2 is checked and no cb-... is checked then the received value is 2.
How can I do this?
I try this
$("input:checked").each(function(i) {
if (($(this).attr("radioatrr") == 0)) {
alert(($(this).attr("value"));
}
})
but can not working as I want

You can check out this tutorial from W3 to help you out:
https://www.w3schools.com/jsref/prop_radio_value.asp
In regards to your problem, you can hook in this function:
function handleRadioSelection() {
if(document.getElementByName('choice2').checked) {
if (document.getElementByName('cb-choice1').checked) {
return document.getElementByName('cb-choice1').value
} else if (document.getElementByName('cb-choice2').checked) {
return document.getElementByName('cb-choice2').value
} else {
return document.getElementByName('choice2').value
}
}
}

I'm using a hidden input field to capture the value that you want, you can change it to anything else. I've also modified the radio buttons into two groups, as from reading the question/requirements I think that's how it should be setup.
$("#submit").click(function() {
//capture group 1 and group 2 value that's checked
var val1 = $('input[name=choice]:checked').val();
var val2 = $('input[name=choice2]:checked').val();
//capture the input object with the desired value
var sendVal = $('input[name=myval]');
//reset value to 0 as this happens on click, incase value gets changed
sendVal.val(0);
//if group 1 is 2 and there is a value selected in group2
if(val1==2&&val2 != undefined){
sendVal.val(val2);
//if group 1 is 2 and group 2 is not selected
}else if(val1==2&&val2 == undefined){
sendVal.val(val1);
}
//showing value to be sent in an alert
alert(sendVal.val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Group 1</h2>
<input type="radio" name="choice" value="1" class="myvalue1" /><label for="choice1">text 1</label>
<input type="radio" name="choice" value="2" class="myvalue2" /><label for="choice2">text 2</label>
<input type="radio" name="choice" value="3" class="myvalue3" /><label for="choice3">text 3</label>
<h2>Group 2</h2>
<input type="radio" name="choice2" value="4" class="myvalue4" /><label for="cb-choice1">text 4</label>
<input type="radio" name="choice2" value="5" class="myvalue5" /><label for="cb-choice2">text 5</label>
<input type="hidden"name="myval" value="0">
<br/>
<button id="submit">submit</button>

Target input by value

I have 6 inputs in my HTML like this:
<input type="radio" value="1" />
<input type="radio" value="2" />
<input type="radio" value="3" />
<input type="radio" value="4" />
<input type="radio" value="5" />
<input type="submit" onClick="myFunction();" value="submit" />
When the submit button is clicked, a Javascript function is called. In this javascript function, I want to check which of the radio buttons is checked and which aren't.
Thanks in advance!

javascript
function myFunction() {
var x = document.getElementsByTagName("input");
for(i = 0; i < x.length; i++ ) {
if(x[i].type = "radio") {
if(x[i].checked) {
alert(x[i].value);
}
}
}
}

you can do it easily by jquery
function myfunction(){
$("input[type=radio]:checked").each(function(){
//do something here
});
}

You need to add a class first. this will ensure that you are not checking other radio elements in your page. See below.
<input type="radio" value="1" class='radio'/>
<input type="radio" value="2" class='radio'/>
<input type="radio" value="3" class='radio'/>
<input type="radio" value="4" class='radio'/>
<input type="radio" value="5" class='radio'/>
<input type="submit" onClick="myFunction();" value="submit" />
<!-- javascript- add script tags -->
function myFunction() {
$('.radio').each(function() {
if($(this).is(':checked')) {
alert("it's checked");
}
})
}

Not getting default checked on radio button

I have 10 radio buttons with unique name and these radio buttons are divided into two div. I mean each div have 5 radio buttons and i want to show only one div at a time with first radio button checked. what i want is visible div should have first radio button checked by default. but please note all radio buttons have unique name on a same page.
Below is my code for reference.
<style>
#secondopt, #firstopt { display: none;}
</style>
<script>
function checkme(){
if (document.getElementById("opt1").checked == true){
document.getElementById("firstopt").style.display = "block"
document.getElementById("secondopt").style.display = "none";
}
if (document.getElementById("opt2").checked == true){
document.getElementById("firstopt").style.display = "none"
document.getElementById("secondopt").style.display = "block";
}
}
</script>
<form name="form1">
<label><input type="radio" name="opt" id="opt1" onclick="checkme()" /> First opt</label>
<label><input type="radio" name="opt" id="opt2" onclick="checkme()" /> Second Opt</label>
<div id="firstopt">
<label><input type="radio" name="items" value="data1" />Item 1</label>
<label><input type="radio" name="items" value="data2" />Item 2</label>
<label><input type="radio" name="items" value="data3" />Item 3</label>
<label><input type="radio" name="items" value="data4"/>Item 4</label>
<label><input type="radio" name="items" value="data5"/>Item 5</label>
</div>
<div id="secondopt">
<label><input type="radio" name="items" value="data6"/>Item 6</label>
<label><input type="radio" name="items" value="data7"/>Item 7</label>
<label><input type="radio" name="items" value="data8"/>Item 8</label>
<label><input type="radio" name="items" value="data9"/>Item 9</label>
<label><input type="radio" name="items" value="data10"/>Item 10</label>
</div>
</form>
How to achive this?

As you have divided radio buttons in two div, you should also use group property/name of radio
buttons. Here give two different groups names and then use selected/checked property using radio button id.

do this
<form name=frmone>
<INPUT TYPE="Radio" Name="payment" Value="CC">Credit Card
<INPUT TYPE="Radio" Name="payment" Value="DC">Debit Card
<INPUT TYPE="Radio" Name="payment" Value="PP">PayPal
</form>
<script>
var len = document.frmOne.payment.length;
for (i = 0; i < len; i++) {
document.frmOne.payment[i].checked ;
break;
}
</script>

Disable radio button according to selected choice

I want to disable some radio button in a html form according to selected choices, if he select the first choice in the first radio button group the 2 choices in the second radio button group will be enabled, if not they will be disabled, here's my code:
<script language="javascript">
function RadioMeuble() {
if (document.f.radio1[0].checked) {
alert("Vous avez choisi la proposition " + document.f.radio1[0].value);
document.f.radio2[0].disabled = false;
document.f.radio2[1].disabled = false;
} else {
document.f.radio2[0].disabled = true;
document.f.radio2[1].disabled = true;
}
}
}
</script>
<input type="radio" name="radio1" value="L" id="radio1" onBlur="RadioMeuble()">á louer</label>
<br>
<label>
<input type="radio" name="radio1" value="V" id="radio1">á vendre</label>
</p>
<p>Superficie
<label for="textfield"></label>
<input type="text" name="superficie" id="Superficie">en Km ²</p>
<p>Prix
<label for="textfield2"></label>
<input type="text" name="prix" id="Prix">en DT</p>
<p>Meublé
<input type="radio" name="radio2" id="radio2" value="oui" disabled>Oui
<input type="radio" name="radio2" id="radio2" value="non" disabled>
<label for="radio2"></label>
<label for="radio"></label>Non</p>
It doesn't work. What's wrong with it?

There's a "}" too much in your code (last one).
Don't use the onblur EventHandler. You should use onchange or onclick instead.
<input type="radio" name="radio1" value="L" id="radio1" onchange="RadioMeuble()">
or
<input type="radio" name="radio1" value="L" id="radio1" onclick="RadioMeuble()">
HTH,
--hennson

Well, first of all, you have an extra "}" Second, you probably want the click event instead of the blur event. And you want it on both radio buttons. Next what is document.f? That's not a variable. Next, even if it were, I'm not aware of a browser that lets you use form elements like you are trying to. E.g., document.f.radio2[0].disabled. Also, your radio button should have unique ID names.
See: http://jsfiddle.net/vzYT3/1/ for something more sensible.

You could improve your coding a little, check this example:
<input type="radio" id="r1-1" name="r1" value="1">
<label for="r1-1">Option 1</label>
<input type="radio" id="r1-2" name="r1" value="2">
<label for="r1-2">Option 2</label>
<hr />
<input type="radio" id="r2-1" name="r2" value="a">
<label for="r2-1">Option A</label>
<input type="radio" id="r2-2" name="r2" value="b">
<label for="r2-2">Option B</label>
and
function byId(id) {
return document.getElementById(id);
}
window.onload = function() {
byId('r1-1').onchange = byId('r1-2').onchange = function() {
byId('r2-1').disabled = byId('r2-2').disabled = byId('r1-1').checked;
}
}
Running example at: http://jsfiddle.net/5Mp9m/
It wouldn't be a bad idea to use a javascript library like Jquery.