We Keep Coding

Verify all radio groups have a value checked using a generic selector

How to Verify all radio groups have at least 1 value selected using a generic selector and the .each() function.
All the examples I find require the id or name of the single radio options to be used not the group.

Try this:
const radios = {};
$('input[type="radio"]').each((i, e) => {
let $radio = $(e);
if ($radio.is(':checked')) {
radios[$radio.attr('name')] = $radio.val();
}
});
console.log(radios);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<input type="radio" value="1" name="ri1">
<input type="radio" value="2" name="ri1" checked="checked">
<input type="radio" value="3" name="ri1">
<input type="radio" value="1" name="ri2">
<input type="radio" value="2" name="ri2">
<input type="radio" value="3" name="ri2" checked="checked">

Right way to use Radiobuttons

I'm confused about which is the right way to use radiobuttons. Let's say i have a group of 3 radiobuttons : if all of them have the same id / name, it will work properly , only one can be checked :
<label for="input-rb1" ></label><input class="radio-input" type="radio" id="input-rb1" name="input-rb1"><label for="input-rb1" class="radio-label">First radiobutton</label>
<label for="input-rb1" ></label><input class="radio-input" type="radio" id="input-rb1" name="input-rb1"><label for="input-rb1" class="radio-label">Second radiobutton</label>
<label for="input-rb1" ></label><input class="radio-input" type="radio" id="input-rb1" name="input-rb1"><label for="input-rb1" class="radio-label">Third radiobutton</label>
The problem about this approach is i don't know how to identify which one is checked, because all of them have the same name / id.
The other way would use different names / ids :
<label for="input-rb1" ></label><input class="radio-input" type="radio" id="input-rb1" name="input-rb1"><label for="input-rb1" class="radio-label">First radiobutton</label>
<label for="input-rb2" ></label><input class="radio-input" type="radio" id="input-rb1" name="input-rb2"><label for="input-rb2" class="radio-label">Second radiobutton</label>
<label for="input-rb3" ></label><input class="radio-input" type="radio" id="input-rb1" name="input-rb3"><label for="input-rb3" class="radio-label">Third radiobutton</label>
This way i know how to use JQuery to know which is checked, but it will allow the user to select multiple radios, like it was checkboxes...
How to solve this puzzle ?
Thanks !

An id is a keyword that can be used to find a specific element on a page.
<input type="radio" id="radio1">one
<input type="radio" id="radio2">two
<input type="radio" id="radio1">one
<input type="radio" id="radio2">two
You'll notice the above snippet allows you to select both radio buttons. There's nothing joining them together and the Browser can't assume they're connected.
A name is used to determine a value from an input field - or in the case of radio buttons - a single value from multiple input fields. It joins the radio buttons together to say "Hey, only allow one of you to be checked! That's the value we're going with!"
<input type="radio" name="radio_group">one
<input type="radio" name="radio_group">two
<input type="radio" name="radio_group">one
<input type="radio" name="radio_group">two
Notice that there are no ids in the above code. id and name are not interchangeable. They are completely separate attributes aimed to do two completely different things.
The other answers use JQuery and that's all well and good, but I think it's important to give a vanilla JS example as well.
document.querySelectorAll("input[name='r_group']").forEach((radio) => {
if (radio.checked) {
//do whatever
}
});
document.querySelectorAll("input[name='r_group']").forEach((radio) => {
radio.addEventListener("change", () => {
if (radio.checked) alert(radio.value);
});
});
<input id="radio1" type="radio" name="r_group" value="one">one
<input id="radio2" type="radio" name="r_group" value="two">two
<input id="radio3" type="radio" name="r_group" value="three">three

Only name of radio buttons should be same, id is an unique attribute in elements. You should use different ids and also you can use value attribute to assign values. Code is given below
<form action="">
<input type="radio" id="1" name="gender" value="male"> Male<br>
<input type="radio" id="2" name="gender" value="female"> Female<br>
</form>
You can use jQuery to get selected radio button value as follow
$("input[type='radio']").on('change', function () {
var selectedValue = $("input[name='gender']:checked").val();
if (selectedValue) {
alert(selectedValue);
}
});

First, the values for "id" should be unique to each element. The name attribute can (and should) be the same for all elements in the group.
Then, to get the value of the checked radio use:
$('input[name=name_of_your_radiobutton]:checked').val();

The second approach is wrong, name in radio buttons is used to group them in same class, only one of them can be selected.
Just use the following script-
$('input[name="input-rb1"]:checked').val();
Avoid using hyphen - in javascript instead use _ if possible

How to set a default radio button with a value?

General issue: I cannot set a default radio button in my radio groups unless I remove the value attribute from the inputs.
Specifics: Each input has a value that is needed as it is being used by angular in other places in the app. So, I need to know how to set an input to default checked while retaining the values on the inputs. It has the same behavior if I try to add checked with jQuery instead of in HTML.
I have looked at several related questions including here. The specific issue is I need to have values and be able to set one input to checked as a default. The first input is set to checked, but it does not actually work unless I remove the value from that input.
Here is the HTML:
<div class="radio">
<label>
<input type="radio" ng-model="optionsRadios" id="new" value="new" checked>
New
</label>
<label>
<input type="radio" ng-model="optionsRadios" id="used" value="used">
Used
</label>
<label >
<input type="radio" ng-model="optionsRadios" id="broken" value="broken">
Broken
</label>
</div>

You have to use ng-checked="true" instead of checked
<input type="radio" ng-model="optionsRadios" id="new" value="new" ng-checked="true">
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="">
<p>My cars:</p>
<input type="radio" ng-model="all" value="Volvo" ng-checked="true">Volvo<br>
<input type="radio" ng-model="all" value="Ford">Ford<br>
<input type="radio" ng-model="all" value="Mercedes">Mercedes
</body>
</html>

If you have a group of radio button and you want to set radio button checked based on model, then radio button which has same
value and ng-model is checked automatically.
<input type="radio"
ng-model="optionsRadio" value="1" >
<input type="radio"
ng-model="optionsRadio" value="2" >
<input type="radio"
ng-model="optionsRadio" value="3" >
If the value of optionsRadio is "2" then second radio button will be selected automatically.
In Your Case:
When u r initiating the controller all u have to do is to assign a value to your model to keep atleast one radio button selected.
Controller part:
$scope.optionsRadio = "new";
Form part:
<input type="radio" ng-model="optionsRadio" value="new" >
<input type="radio" ng-model="optionsRadio" value="used" >
<input type="radio" ng-model="optionsRadio" value="broken" >
First radio button will be selected automatically.
Note:
If value doesn't work u can use ng-value.

Display custom HTML5 data attributes from selected radio buttons

I am attempting to retrieve custom data attributes from selected radio buttons from multiple button groups and display them for the user.
Here is an example of the radio buttons I am working with:
<input type="radio" id="poolSmallButton" name="pool" class="calc" value="500" data-selection-name="Small Pool"/>
<input type="radio" id="poolMediumButton" name="pool" class="calc" value="1000" data-selection-name="Medium Pool"/>
<input type="radio" id="landscapingSmallButton" name="landscaping" value="100" class="calc" data-selection-name="Small Landscaping"/>
<input type="radio" id="landscapingMediumButton" name="landscaping" value="500" class="calc" data-selection-name="Medium Landscaping"/>
<span id="quote-items" name="quote-items"></span>
I am currently using this jQuery to extract the data attributes from the selected radio buttons but currently only the top-most radio button loaded in the DOM will only display as my output:
var itemNames = [$(".calc:checked").attr("data-selection-name")];
$("#quote-items").text(itemNames)
Thanks!

Whenever you use .attr(key) method it will always fetch you the value of first matched element. To get the value from all matched element, you need to iterate, there are various methods for that. .each() can be used to iterate and push the value in an array.
Here I have used .map() to get an array of attribute value for checked checkbox
$('.calc').change(function() {
var itemNames = $(".calc:checked").map(function() {
return $(this).attr("data-selection-name")
})
.get() //Get an array
.join(',') //Generate Comma seperate string;
$("#quote-items").text(itemNames);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" id="poolSmallButton" name="pool" class="calc" value="500" data-selection-name="Small Pool" />
<input type="radio" id="poolMediumButton" name="pool" class="calc" value="1000" data-selection-name="Medium Pool" />
<input type="radio" id="landscapingSmallButton" name="landscaping" value="100" class="calc" data-selection-name="Small Landscaping" />
<input type="radio" id="landscapingMediumButton" name="landscaping" value="500" class="calc" data-selection-name="Medium Landscaping" />
<span id="quote-items" name="quote-items"></span>
Additionaly, You can use Element.dataset property to access data-* prefixed attribute like
this.dataset.selectionName;
instead of
$(this).attr("data-selection-name");

How to
<input type="radio" id="poolSmallButton" name="pool" class="calc" value="500" data-selection-name="productname" ata-selection-price="productprice" />
$("#sonuc-v2").text(data-selection-price);
$("#sonuc-v2").text(data-selection-price);

how to get only one radio button value in javascript

<input type="radio" name="red" value ="red" onclick="myFunction(this.value);"id="chkbx" /> Red<br>
<input type="radio" name="green" value ="green" onclick="myFunction(this.value);"id="chkbx" > green<br>
<input type="radio" name="yellow" value ="yellow " checked onclick="myFunction(this.value);"id="chkbx" > yellow<br>
<input type="radio" name="orange" value ="orange" onclick="myFunction(this.value);"id="chkbx" > orange<br>
<input type="radio" name="blue" value ="blue" onclick="myFunction(this.value);"id="chkbx" > blue<br>
<p id="demo"></p>
button onclick="myfunction(this.value)">My Choice</button>
<br><br>
<p id="demo"></p>
<script>
function myFunction(chkbx)
{
if(chkbx.checked)
{
chkbx.checked = false;
}
else
{
chkbx.checked = true;
}
The Thing is " I want to get the colour from radio button apply to a text in output screen(at a time one radio button would be select).What can i do. Please give some idea. i am new to javascript. I want in javascript only.

.Value will return you the value:
function myFunction(chkbx)
{
if(chkbx.checked)
{
alert(chkbx.value);
}
}

Give all the radio buttons in the group the same name.

Radio buttons allow the user to select only ONE of a predefined set of options. You define groups with the name property (radio buttons with the same name belong to the same group).
So to solve your issue, you can do as belows.
<p><input type="radio" name="color" value ="red"><i>Red</i></p>
<p><input type="radio" name="color" value ="green"><i>Green</i></p>
<p><input type="radio" name="color" value ="yellow" checked><i>Yellow</i></p>
<p><input type="radio" name="color" value ="orange"><i>Orange</i></p>
<p><input type="radio" name="color" value ="blue"><i>Blue</i></p>