![](/img/trans.png)
[英]Preserve the default value of hidden radio button based on check box selection
[英]Javascript check a radio button in form based on a text box value
我有一個表單,可以從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;
}
}
這不行
在此先感謝您的幫助
您正在RadioChk
函數中check
和uncheck
check
相關代碼,但是尚未在單選輸入上綁定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">
嘗試以下示例,其中單選和文本框值根據選擇/輸入而變化
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" />
僅當數據實際輸入到文本框中時,此方法才有效-在我的情況下,數據是通過函數檢索的,並填充了文本框
在那種情況下,只需在文本框上觸發事件
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.