Here I'm using firebase to display all driver info one by in one div. I have 6 div(i.e 6 object in driver reference) & each div has a checkbox with enabled/disabled option. I want operate checkbox in such way that if I click checkbox of 1st div it will change in only in 1st div,if I click checkbox of 2nd div it will change in only in 2nd div,& so on but the problem is when I clicked any checkbox only 1st checkbox is change... How can I overcome this...thanks in advance
<script>
function contactHtmlFromObject(Key, Driver){
console.log(Key,Driver);
if(Driver.Gender=='Male'){
html +='<input type="checkbox" id="disablecheckbox" onclick="loaddisable(\''+Key+'\')"><span id="toggle">Enabled</span>';
}
else{
html +='<input type="checkbox" id="disablecheckbox" onclick="loaddisable(\''+Key+'\')" checked><span id="toggle">Disabled</span>';
}
}
function loaddisable(Key) {
var toggle= document.getElementById("toggle");
var dcb= document.getElementById("disablecheckbox");
var Refdis = firebase.database().ref("Driver/"+Key);
Refdis.on("value", function(snapshot) {
if (dcb.checked == true){
toggle.innerHTML="Disabled";
}
else {
toggle.innerHTML="Enabled";
}
});
}
As the nice folks from the comments already suggested, your IDs aren't unique. That's the whole purpose of a ID, right ?! :)
So your JS functions look at the first element with the id, does what it supposed to do with it, and stops.
Instead of using id, I used a class as the selector and built two functions:
One for enabling the checkbox
One for disabling them.
I achieved that simply by looping over the elements that have that specific class name.
Check out the code snippet and see if it works for you ;)
function disable(obj){
const elem = document.getElementsByClassName("checks");
for(let i = 0; i < elem.length; i++){
if(obj != elem[i]){
elem[i].disabled = true;
}
}
}
function enable(obj){
const elem = document.getElementsByClassName("checks");
for(let i = 0; i < elem.length; i++){
if(obj != elem[i]){
elem[i].disabled = false;
}
}
}
Checkbox 1: <input type="checkbox" class="checks"> <br>
Checkbox 2: <input type="checkbox" class="checks"> <br>
Checkbox 3: <input type="checkbox" class="checks"> <br>
Checkbox 4: <input type="checkbox" class="checks"> <br>
Checkbox 5: <input type="checkbox" class="checks"> <br>
<button onclick="disable(this)">Disable All</button>
<button onclick="enable(this)">Enable All</button>
Related
I have two checkboxes in HTML called accepttermsandcond-checkbox and accepttermsandcond-checkbox and I made a Button called startusing-button
I want the startusing-button to stay disabled, if one of these checkboxes are not checked.
The problem is that it disables it right now in the beginning, but if I check both, it doesn't enable the button.
Note: even if I add document.getElementById('startusing-button').disabled = false; to the code it doesn't solve the issue
How could I make the button to be enabled only if both of the checkboxes are checked?
Edit: I forgot to mention that I have a lot of checkboxes and buttons. It would be ideal if the solution only affected these two checkboxes with one button, leaving the rest of the checkboxes and buttons alone.
var ebpDocumentCheckboxid = document.getElementById('document-checkboxid');
var ebpAcceptTermsandCondCheckbox =document.getElementById('accepttermsandcond-checkbox');
if (ebpDocumentCheckboxid.checked && ebpAcceptTermsandCondCheckbox.checked) {
}
else {
document.getElementById('startusing-button').disabled = true;
}
<input type="checkbox" id="document-checkboxid"/>
<input type="checkbox" name="VAT" id="accepttermsandcond-checkbox"/>
<button type="button" id="startusing-button">CreateSubscription</button>
You have to trigger change of checkboxes.
Simply checking both checkboxes have checked or not, will work only on the loading of document. You have to repeat this process each time the checkbox status is changed.
I have modified your script a little bit.
Logic
Select all checkboxes using document.querySelectorAll('input[type="checkbox"]').
Add a change event on checkbox by looping this list using forEach.
Inside the change event, find the count of selected checkboxes.
If that matches to the length of total check box, enable the button, or disable it.
const checkBoxes = document.querySelectorAll('input[type="checkbox"]');
const submitButton = document.getElementById('startusing-button');
checkBoxes.forEach((cb) => {
cb.addEventListener('change', checkButtonStatus);
});
function checkButtonStatus() {
const checkedCount = [...checkBoxes].filter((cb) => cb.checked);
submitButton.disabled = checkedCount.length !== checkBoxes.length
}
checkButtonStatus();
<input type="checkbox" id="document-checkboxid" />
<input type="checkbox" name="VAT" id="accepttermsandcond-checkbox" />
<button type="button" id="startusing-button">CreateSubscription</button>
Edit:
If you want to select only the two checkboxes, you can handle this in multiple ways. You can use some custom attribute with some unique value. Here in the below example I use identifier="my-custom-identifier" and make the inputs selection with document.querySelectorAll('input[identifier="my-custom-identifier"]'). This will check for all input elements with the identifier having value my-custom-identifier.
Why I use this approach is to make your solution a little more generic. You just have to use identifier="my-custom-identifier" in all inputs where you want to include for this checking.
Working Fiddle
const checkBoxes = document.querySelectorAll('input[identifier="my-custom-identifier"]');
const submitButton = document.getElementById('startusing-button');
checkBoxes.forEach((cb) => {
cb.addEventListener('change', checkButtonStatus);
});
function checkButtonStatus() {
const checkedCount = [...checkBoxes].filter((cb) => cb.checked);
submitButton.disabled = checkedCount.length !== checkBoxes.length
}
checkButtonStatus();
<input type="checkbox" id="document-checkboxid" identifier="my-custom-identifier" />
<input type="checkbox" name="VAT" id="accepttermsandcond-checkbox" identifier="my-custom-identifier" />
<button type="button" id="startusing-button">CreateSubscription</button>
If you still want to make use of only 2 element by picking them with id, you could select them using ids. Like document.querySelector('input[id="document-checkboxid"]') and document.querySelector('input[id="accepttermsandcond-checkbox"]') and bind change event to them. Inside the change event, check whether both are checked inside the change function.
Working Fiddle
const checkBox1 = document.querySelector('input[id="document-checkboxid"]');
const checkBox2 = document.querySelector('input[id="accepttermsandcond-checkbox"]');
const submitButton = document.getElementById('startusing-button');
checkBox1.addEventListener('change', checkButtonStatus);
checkBox2.addEventListener('change', checkButtonStatus);
function checkButtonStatus() {
const allChecked = checkBox1.checked && checkBox2.checked;
submitButton.disabled = !allChecked;
}
checkButtonStatus();
<input type="checkbox" id="document-checkboxid" />
<input type="checkbox" name="VAT" id="accepttermsandcond-checkbox" />
<button type="button" id="startusing-button">CreateSubscription</button>
EDIT#2: I updated the answer to have coverage both for required and optional checkboxes, as requested in comments.
EDIT: just noticed it still can be accessed with keyboard tab focus and fire the event. So not a perfect solution, note this.
This can be done with plain CSS:
button {
padding: 10px;
}
input[required]:not(:checked) ~ button {
background-color: #b0b0b0;
color: #d0d0d0;
border: 1px outset #808080;
pointer-events: none;
}
<form>
<label>ID:</label>
<input type="checkbox" id="document-checkboxid" required />
<label>T&C</label>
<input type="checkbox" name="VAT" id="accepttermsandcond-checkbox" required />
<hr />
<label>Something irrelevant:</label><input type="checkbox" name="optional_one" id="something" />
<label>Also optional:</label><input type="checkbox" name="optional_two" id="something else" />
<hr />
<button type="submit" id="startusing-button">CreateSubscription</button>
</form>
If i understood you correct you want the button to be only enabled when both checkboxes are checked, right? If so you could try something like this:
var ebpDocumentCheckboxid = document.getElementById("document-checkboxid");
var ebpAcceptTermsandCondCheckbox = document.getElementById(
"accepttermsandcond-checkbox"
);
var btn = document.getElementById("startusing-button");
const onCheckboxChanged = ()=>{
btn.disabled = (!ebpDocumentCheckboxid.checked) || (!ebpAcceptTermsandCondCheckbox.checked);
}
ebpDocumentCheckboxid.onchange = onCheckboxChanged;
ebpAcceptTermsandCondCheckbox.onchange = onCheckboxChanged;
I also added disabled="true" to the button so its disabled from the start.
Here is a codepen of a working example: https://codepen.io/jonas_weinhardt/pen/QWgoGzL?editors=1010
Edit:
You should probably use Nitheesh answer because its a much simpler and general approach!
Try this code, more simple and readable(I hope).
(()=>{
let checkboxes = [
document.querySelector('#document-checkboxid'),
document.querySelector('#accepttermsandcond-checkbox')
];
let button = document.querySelector('#startusing-button');
for(let checkbox of checkboxes) {
checkbox.addEventListener('click', changeStatus); // changeStatus function onclick
}
changeStatus(); // run changeStatus function automatically
function changeStatus(){
if(checkboxes.every(checkbox => checkbox.checked)) button.removeAttribute('disabled');
else button.setAttribute('disabled', 'true');
}
})();
<input type="checkbox" id="document-checkboxid"/>
<input type="checkbox" name="VAT" id="accepttermsandcond-checkbox"/>
<button type="button" id="startusing-button">CreateSubscription</button>
try this,
i add value "disabled" to button and create two onclick method to get .checked status, and if both are true change button parameter "disabled=true" to "disabled=false"
<!DOCTYPE html>
<head>
</head>
<body>
<div id = "test">
<input type="checkbox" id="document-checkboxid" onclick="firstchb()"/>
<input type="checkbox" name="VAT" id="accepttermsandcond-checkbox" onclick="secondchb()"/>
<button type="button" id="button" disabled >CreateSubscription</button>
</div>
</body>
<script>
let ebpDocumentCheckboxid = null;
let ebpAcceptTermsandCondCheckbox = null;
function firstchb(){
ebpDocumentCheckboxid = document.getElementById('document-checkboxid').checked;
enableit();
}
function secondchb(){
ebpAcceptTermsandCondCheckbox = document.getElementById('accepttermsandcond-checkbox').checked;
enableit();
}
function enableit(){
if (ebpDocumentCheckboxid == true && ebpAcceptTermsandCondCheckbox == true) {
document.getElementById('button').disabled = false;
}
else {
document.getElementById('button').disabled = true;
}
}
</script>
</html>
I was wondering if there was a better way to go about enabled/disabled multiple checkboxes at once.
In the html I have two radio buttons to choose between all hair options and custom hair options, having the default all one disable the checkboxes while the custom one enables them.
This is what I've got so far that works (probably looks dumb, I apologize), but I'd like to know if there's a more efficient way to go about this? I'd like to do it as "small" as possible while still being easily readable/understandable for my own sake.
function checkHaOp(){
if (document.getElementById("hairOptionAll").checked){
document.getElementById("hairAuburn").disabled = true;
document.getElementById("hairBlack").disabled = true;
document.getElementById("hairBlonde").disabled = true;
document.getElementById("hairBrown").disabled = true;
document.getElementById("hairRed").disabled = true;
document.getElementById("hairOther").disabled = true;
}
else if (document.getElementById("hairOptionCustom").checked){
document.getElementById("hairAuburn").disabled = false;
document.getElementById("hairBlack").disabled = false;
document.getElementById("hairBlonde").disabled = false;
document.getElementById("hairBrown").disabled = false;
document.getElementById("hairRed").disabled = false;
document.getElementById("hairOther").disabled = false;
}
}
Preferably using javascript since I don't know jquery.
I'd also appreciate explanations of things since I am still learning.
You can add/use class like said #NiettheDarkAbsol
then something like that.
var inpck = document.getElementsByClassName("input-checkbox");
if (document.getElementById("hairOptionAll").checked) {
for(var i = 0; i < inpck.length; i++) {
inpck[i].disabled = true;
}
}
if (document.getElementById("hairOptionCustom").checked) {
for(var i = 0; i < inpck.length; i++) {
inpck[i].disabled = false;
}
}
Now your turn to refactor this :D
You can use
document.querySelectorAll('[id^=hair]')
It selects all elements that has an id which starts with "hair"
<!DOCTYPE html>
<html>
<body>
<input type="checkbox" id="hairOptionAll">
<input type="checkbox" id="hairAuburn">
<input type="checkbox" id="hairBlack">
<input type="checkbox" id="hairBlonde">
<input type="checkbox" id="hairBrown">
<input type="checkbox" id="hairRed">
<input type="checkbox" id="hairOther">
</body>
<script>
const hairCb = document.querySelectorAll('[id^=hair]');
for (let i=0; i<hairCb.length; i++) {
hairCb[i].disabled = true;
}
</script>
</html>
Here's the optimized solution.
<div class="radio-btns">
All <input type="radio" id="hairOptionAll" name="hairOptionAll"/>
Custom <input type="radio" id="hairOptionCustom" name="hairOptionCustom"/>
</div>
<div class="hairOptions">
hairAuburn <input type="checkbox" id="hairAuburn" />
hairBlack <input type="checkbox" id="hairBlack" />
hairBlonde <input type="checkbox" id="hairBlonde" />
hairBrown <input type="checkbox" id="hairBrown" />
hairRed <input type="checkbox" id="hairRed" />
hairOther <input type="checkbox" id="hairOther" />
</div>
<script type="text/javascript">
const radioBtns = document.querySelector('.radio-btns');
radioBtns.children[0].checked = true;
radioBtns.addEventListener("click", (event) => {
radioBtns.children[0].checked = (event.target.id == 'hairOptionAll') ? true : false;
radioBtns.children[1].checked = (event.target.id == 'hairOptionCustom') ? true : false;
const allOptions = [...event.target.parentElement.nextElementSibling.children];
allOptions.map(option => ( option.checked = (event.target.id == 'hairOptionCustom') ? true : false ) );
});
</script>
Here is a complete working code you. To minimise the code we write to we need to use a class selector not an id - Give the same class to your radio button and then use a forEach loop to go through all the radio button. Add the class to your checkboxes as well.
To get all the checkboxes we can use forEach method.
Once you have all the radio button you need to listen for a change on a particular radio button and then we will check whether the radio button we have selected is checked and its id is all or custom.
To get the id of the actual radio button which was clicked we can use getAttribute method which return the id of checked radio button.
If our condition matches we will disable all the checkboxes or if its else then we enable all the checkboxes using forEach loop on the checkbox classes.
We will pass true or false as an argument to disable checkboxes function to avoid having have two loops
Live Working Example (I have added notes / comment on each line of code for your understanding as well)
//Enable disable checkbox
function disableChekbox(isChecked) {
let getHairOptions = document.querySelectorAll('.hairOptions') //get all checkboxes
getHairOptions.forEach(function(x) {
x.disabled = isChecked
})
}
let getHairRadio = document.querySelectorAll('.hairOptionAll') //get all radio buttons
//For each all radio buttons
getHairRadio.forEach(function(radio) {
//listen to change on radio
radio.addEventListener('change', function(e) {
if (e.target.checked && e.target.getAttribute('id') == 'hairOptionAll') {
//loop through all checkboxes
disableChekbox(true)
} else if (e.target.checked && e.target.getAttribute('id') == 'hairOptionCustom') {
//loop through all checkboxes
disableChekbox(false)
}
})
})
All <input type="radio" id="hairOptionAll" name="hairOptionAll" class="hairOptionAll" />
Custom <input type="radio" id="hairOptionCustom" name="hairOptionAll" class="hairOptionAll" />
<br>
<br>
hairAuburn <input type="checkbox" id="hairAuburn" class="hairOptions" />
hairBlack <input type="checkbox" id="hairBlack" class="hairOptions" />
hairBlonde <input type="checkbox" id="hairBlonde" class="hairOptions" />
hairBrown <input type="checkbox" id="hairBrown" class="hairOptions" />
hairRed <input type="checkbox" id="hairRed" class="hairOptions" />
hairOther <input type="checkbox" id="hairOther" class="hairOptions" />
I am trying to write a function that will show or hide an html element (contained in a div) using javascript. Right now I have 3 radio buttons (to eventually show/hide 3 elements depending on radio button selected, but right now I am just trying to hide one element (month) if year or week is selected, and to show it if month is selected. My html is:
<div id="setting">
<input type="radio" id="year" name="view" value="year"> year<br>
<input type="radio" id="month" name="view" value="month"> month<br>
<input type="radio" id="week" name="view" value="week"> week
</div>
<div id="cal">
(element here I am trying to show/hide)
</div>
My javascript is:
function defineSetting (){
var setting = document.getElementById('setting').checked;
if(setting =='year'){
document.getElementById("cal").style.display = "none";
}else if(setting =='month'){
document.getElementById("cal").style.display = "unset";
}else if(setting =='week'){
document.getElementById("cal").style.display = "none";
}
}
I am also not super experienced with javascript and am trying to figure out how to call the function (if it works). If it is in the document ready function will it run when the page is loaded or do i need to call it somewhere.
I think this is what you're going for. You want to add an event listener to the buttons, and pass the value of the input that's checked to the defineSetting() function that hides/shows your #cal element. I also simplified your test in defineSetting()
<div id="setting">
<input type="radio" id="year" name="view" value="year" class="setting"> year<br>
<input type="radio" id="month" name="view" value="month" class="setting"> month<br>
<input type="radio" id="week" name="view" value="week" class="setting"> week
</div>
<div id="cal">
(element here I am trying to show/hide)
</div>
<style>
.hidden { display: none; }
</style>
<script>
var inputs = document.getElementsByClassName('setting'),
setting;
for (var i = 0; i < inputs.length; i++) {
var el = inputs[i];
el.addEventListener('change', function() {
defineSetting(this.value);
})
}
function defineSetting(setting) {
if (setting == 'year' || setting == 'week') {
document.getElementById("cal").classList.add('hidden');
} else {
document.getElementById("cal").classList.remove('hidden');
}
}
</script>
This will help you out:
How to get value of selected radio button?
You are trying to get the checked value of a div element, but this element doesn't have that. The input element do have that property so that's where you can get it from.
I am having 100 Checkboxes on my web page. For testing purposes I want to tick all those boxes, but manually clicking is time consuming. Is there a possible way to get them ticked?
Perhaps a JavaScript or Chrome Console window, anything?
The most direct way would be to grab all your inputs, filter just the checkboxes out, and set the checked property.
var allInputs = document.getElementsByTagName("input");
for (var i = 0, max = allInputs.length; i < max; i++){
if (allInputs[i].type === 'checkbox')
allInputs[i].checked = true;
}
If you happen to be using jQuery—and I'm not saying you should start just to tick all your checkboxes for testing—you could simply do
$("input[type='checkbox']").prop("checked", true);
or as Fabricio points out:
$(":checkbox").prop("checked", true);
Pure JS method, don't use jQuery.. its just silly for something so trivial.
[].forEach.call( document.querySelectorAll('input[type="checkbox"]'),function(el){
el.checked=true;
}
);
Live Demo
To use it on any webpage you can paste this into the address bar
javascript:[].forEach.call(document.querySelectorAll('input[type="checkbox"]'),function(el){el.checked=true});
then drag that to your bookmarks, and you have a bookmarklet. Just click it whenever you need to use it on a page.
querySelectorAll is your best choice here if you don't want jQuery!
var ele = document.querySelectorAll("input[type=checkbox]");
for(var i=0;i<ele.length;i++){
ele[i].checked = true;
}
//Done.
by using jquery, simple as that
$('input:checkbox').each(function () {
// alert(this);
$(this).attr('checked', true);
});
Or simply use
$('input:checkbox').prop('checked', true);// use the property
OR
$('input:checkbox').attr('checked', true); // by using the attribute
Just paste one of these one-liners to your browser console:
Tick all checkboxes:
document.querySelectorAll('input[type="checkbox"]').forEach(e => e.checked = true);
Untick all checkboxes:
document.querySelectorAll('input[type="checkbox"]').forEach(e => e.checked = false);
This JS code will check all checkboxed in your page:
var a = document.querySelectorAll('input[type="checkbox"]');
for (var i=0; i<a.length; i++)
a[i].checked = true;
Live demo
All you have to do then is create a bookmarklet with it, say, with this bookmarklet maker, which generates this bookmarklet code:
javascript:var a=document.querySelectorAll('input[type="checkbox"]');for(var i=0;i<a.length;i++)a[i].checked=true;%E2%80%8B
Just add this URI to a bookmark in your bookmark toolbar, then all you have to do is click it whenever you need all the checkboxes in your page to be checked. =]
Multiple Check All & Uncheck All Boxes
All You Need to change is the tag 'name' to change the what its turing ON/OFF
<FORM>
<input type="checkbox" name="item0[]" onclick="CheckAll(this)" />
<input type="checkbox" name="item0[]" value="1" />
<input type="checkbox" name="item0[]" value="2" />
<input type="checkbox" name="item0[]" value="3" />
<br>
<input type="checkbox" name="item1[]" onclick="CheckAll(this)" />
<input type="checkbox" name="item1[]" value="a" />
<input type="checkbox" name="item1[]" value="b" />
<input type="checkbox" name="item1[]" value="c" />
<br>
<input type="checkbox" name="item2" onclick="CheckAll(this)" />
<input type="checkbox" name="item2" value="a1" />
<input type="checkbox" name="item2" value="b2" />
<input type="checkbox" name="item2" value="bc" />
</FORM>
<script>
function CheckAll(x)
{
var allInputs = document.getElementsByName(x.name);
for (var i = 0, max = allInputs.length; i < max; i++)
{
if (allInputs[i].type == 'checkbox')
if (x.checked == true)
allInputs[i].checked = true;
else
allInputs[i].checked = false;
}
}
</script>
I provided answer to this question at Check all Checkboxes in Page via Developer Tools
In short you can do it from dev tools console (F12) by:
$$('input').map(i => i.checked = true)
or
$$('input[type="checkbox"').map(i => i.checked = true)
The following code will toggle all checkboxes. I think this is useful in case you want that feature. If you check a box it will uncheck that box. I know this doesn't answer the question technically but I wanted to put it up here because it's what I use. Thanks for the comment. I hope this answer is better suited to your pallette.
//Select All Checkboxes On Page
allSelects = document.querySelectorAll('input[type="checkbox"]');
for(i=0;i<allSelects.length;i++){
allSelects[i].click();
}
function selectAll(elem)
{
for (i = 0; i < elem.length; i++)
elem[i].checked = true ;
}
On Click of a button call this method and pass the name of the element(checkboxes-they all should be same named).
What method would be best to use to selectively set a single or multiple radio button(s) to a desired setting with JavaScript?
Very simple
radiobtn = document.getElementById("theid");
radiobtn.checked = true;
the form
<form name="teenageMutant">
<input value="aa" type="radio" name="ninjaTurtles"/>
<input value="bb" type="radio" name="ninjaTurtles"/>
<input value="cc" type="radio" name="ninjaTurtles" checked/>
</form>
value="cc" will be checked by default, if you remove the "checked" non of the boxes will be checked when the form is first loaded.
document.teenageMutant.ninjaTurtles[0].checked=true;
now value="aa" is checked. The other radio check boxes are unchecked.
see it in action: http://jsfiddle.net/yaArr/
You may do the same using the form id and the radio button id. Here is a form with id's.
<form id="lizardPeople" name="teenageMutant">
<input id="dinosaurs" value="aa" type="radio" name="ninjaTurtles"/>
<input id="elephant" value="bb" type="radio" name="ninjaTurtles"/>
<input id="dodoBird" value="cc" type="radio" name="ninjaTurtles" checked/>
</form>
value="cc" is checked by default.
document.forms["lizardPeople"]["dinosaurs"].checked=true;
now value="aa" with id="dinosaurs" is checked, just like before.
See it in action: http://jsfiddle.net/jPfXS/
Vanilla Javascript:
yourRadioButton.checked = true;
jQuery:
$('input[name=foo]').prop('checked', true);
or
$("input:checkbox").val() == "true"
You can also explicitly set value of radio button:
<form name="gendersForm">
<input type="radio" name="gender" value="M" /> Man
<input type="radio" name="gender" value="F" /> Woman
</form>
with the following script:
document.gendersForm.gender.value="F";
and corresponding radio button will be checked automatically.
Look at the example on JSFiddle.
/**
* setCheckedValueOfRadioButtonGroup
* #param {html input type=radio} vRadioObj
* #param {the radiobutton with this value will be checked} vValue
*/
function setCheckedValueOfRadioButtonGroup(vRadioObj, vValue) {
var radios = document.getElementsByName(vRadioObj.name);
for (var j = 0; j < radios.length; j++) {
if (radios[j].value == vValue) {
radios[j].checked = true;
break;
}
}
}
Try
myRadio.checked=true
<input type="radio" id="myRadio">My radio<br>
$("#id_of_radiobutton").prop("checked", true);
I am configuring a radio button within a document fragment and tried using radiobtn.checked = true;.
That didn't work so I instead went with this solution:
radiobtn.setAttribute("checked", "checked");
This sets checked using name to cycle through the elements and a value check to set the desired element to true. I kept it as simple as possible, its pretty easy to put it into a function or a loop, etc.
variable 'nameValue' is the radio elements name value
variable 'value' when matched sets the radio button
Array.from( document.querySelectorAll('[name="' + nameValue + '"]') ).forEach((element,index) =>
{
if (value === element.value) {
element.checked = true;
} else {
element.checked = false;
}
});