Question

我有一个表单，可以从Google工作表中插入和检索数据。

示例：

我的表单上有两个单选按钮

<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 ()" />

单击上面的按钮时，单选按钮的值将存储在文本框中。RadioValInsert ()会这样做

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

我可以将此值1或2插入Google表格中相应的单元格中。

当我要对其进行编辑时，我检索数据，并且“文本框”值为1或2

检索数据的按钮具有根据“文本”框的值检查相应单选按钮的功能。

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;
  }
}

这不起作用

预先感谢您的帮助

Answer 1

您正在check函数中执行uncheck和RadioChk相关的代码，但是尚未在无线电输入上绑定click event。如果我正确理解了您的问题，请按以下步骤选择和取消选择单选按钮。

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

尝试下面的示例，其中单选和文本框的值根据选择/输入而变化

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" />

仅当将数据实际输入到文本框中时，此方法才有效-在我的情况下，数据是通过函数检索的，并填充了文本框

那样，只需在文本框上触发事件

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

2 个答案: