Javascript根据文本框值检查表单中的单选按钮

Question

I have a form which inserts and retrieves data from a google sheet.

Example:

I have two radio buttons on my form

<input id="Rdio_1" name="RdioSelect" type="radio" class="FirstCheck" 
    value="1" onchange="RadioValInsert ()"/>

<input id="Rdio_2" name="RdioSelect"  type="radio" class="FirstCheck" 
    value="2" onchange="RadioValInsert ()" />

when the above is clicked the value of the radio button is stored in a text box..the RadioValInsert () does it

<input type="text" id="DatafromRadio" name="DatafromRadio">

I am able to insert this value of 1 or 2 into the corresponding cell in google sheet.

When I want to EDIT it, I retrieve the data and the Textbox value is 1 or 2

The button which retrieves the data has a function to check the corresponding radio button based on the value of the Text box.

function RadioChk() {
  var val = document.getElementById("DatafromRadio").value;
  if (val == 1) {
    document.getElementById("Rdio_1").checked = true;
  }
  if (val == 2) {
    document.getElementById("Rdio_2").checked = true;
  }
}

This is not working

Thanks in advance for your help

Answer 1

You are doing your check and uncheck related code inside RadioChk function however you haven't bind click event on radio inputs . If i correctly understood your question , here is how you can select and deselect your radio buttons.

 function RadioValInsert() { console.log('checked'); var val = document.getElementById("DatafromRadio").value; if(val ==1 || val ==2){ uncheckAll(); document.getElementById("Rdio_"+val).checked = true; }else{ uncheckAll(); console.log('choose only between 1 or 2'); } } function uncheckAll(){ let ele = document.getElementsByName("RdioSelect"); for(var i=0;i<ele.length;i++){ ele[i].checked = false; } } 

 <input id="Rdio_1" name="RdioSelect" type="radio" class="FirstCheck" value="1" onchange="RadioValInsert ()"/> <input id="Rdio_2" name="RdioSelect" type="radio" class="FirstCheck" value="2" onchange="RadioValInsert ()" /> <input type="text" id="DatafromRadio" name="DatafromRadio"> 

Answer 2

Try this example where radio selection and textbox value changes as per selection/input

 document.addEventListener('DOMContentLoaded', function(dce) { var radios = document.querySelectorAll('[name="RdioSelect"]'); var textbx = document.querySelector('[name="DatafromRadio"]'); radios.forEach(function(r) { r.addEventListener('click', function(e) { textbx.value = this.value; }); }); textbx.addEventListener('input', function(e) { radios.forEach(function(r) { r.checked = (r.value === textbx.value); }); }); var fillTxt = function(txt) { textbx.value = txt; textbx.dispatchEvent(new Event('input')); //<-- trigger event }; fillTxt('2'); //<--- update text box }); 

 <input id="Rdio_1" name="RdioSelect" type="radio" value="1" /> <input id="Rdio_2" name="RdioSelect" type="radio" value="2" /> <input type="text" id="DatafromRadio" name="DatafromRadio" /> 

this works only if data is input physically in the text box - in my case the data is retrieved via a function and it populates the text box

In that, just trigger event on textbox