我有一個(gè) <form>，其中有幾個(gè)單選按鈕組：<form>Group 1: <input type='radio' name='a' value='1'><input type='radio' name='a' value='2'><input type='radio' name='a' value='3'><br>Group 2: <input type='radio' name='b' value='1'><input type='radio' name='b' value='2'><input type='radio' name='b' value='3'></form>如何在每次選擇更改事件時(shí)將所有內(nèi)容保存到localStorage，然后在頁(yè)面重新加載時(shí)（例如，在我們關(guān)閉并重新打開瀏覽器后）重新加載之前選擇的項(xiàng)目？我對(duì)此的所有想法似乎都不必要地復(fù)雜。我們可能必須為事件“選擇單選按鈕”分配一個(gè)監(jiān)聽器?；蛘呶覀儜?yīng)該簡(jiǎn)單地用“改變”來檢測(cè)這一點(diǎn)嗎？事件？注意：這解決了 <input type="text"> 的類似問題：自動(dòng)將所有輸入值保存到 localStorage 并在頁(yè)面重新加載時(shí)恢復(fù)它們也許有更簡(jiǎn)單的方法：我們能否將整個(gè) <form>狀態(tài)（輸入值、選定的單選按鈕等）序列化為localStorage ，并且無(wú)需 jQuery 即可輕松恢復(fù)它？（無(wú)需為文本輸入編寫特定代碼、單選按鈕的其他代碼、復(fù)選框的其他代碼等）
1 回答
慕慕森
TA貢獻(xiàn)1856條經(jīng)驗(yàn) 獲得超17個(gè)贊
這是單選按鈕的解決方案：
document.querySelectorAll('input[type="radio"]').forEach(elt => {?
? ? if (localStorage.getItem(elt.name) == elt.value)?
? ? ? ? elt.checked = true;?
? ? elt.addEventListener("change", e => {?
? ? ? ? localStorage.setItem(e.target.name, e.target.value);?
? ? });?
});
守候你守候我
TA貢獻(xiàn)1802條經(jīng)驗(yàn) 獲得超10個(gè)贊
創(chuàng)建輔助函數(shù)來檢索表單值：https://stackoverflow.com/a/41262933/4988674
添加事件監(jiān)聽器以進(jìn)行表單更改：https://stackoverflow.com/a/10760931/4988674
內(nèi)部事件偵聽器將表單數(shù)據(jù)保存到 localStorage：https://stackoverflow.com/a/2010948/4988674
創(chuàng)建“onload”事件并從 localStorage 填充表單值：https://stackoverflow.com/a/7327185/4988674 和 https ://benalexkeen.com/autofilling-forms-with-javascript/
- 1 回答
- 0 關(guān)注
- 188 瀏覽
添加回答
舉報(bào)
0/150
提交
取消