主页 / 问题 / 1602935
Accepted
alexWithoutBeard
Asked:2024-12-20 19:52:28 +0000 UTC2024-12-20 19:52:28 +0000 UTC

如何保存单选按钮、复选框、选择的状态

  • 772

有一个带有选择器、输入、单选、复选框等的表单。更新时需要保存数据（localstorage帮我）

但我有一个问题，需要对许多复选框、选择器等进行排序，例如，如何将此数据放入一个对象中？创建嵌套对象？

以下是我设法实现的）

let form = document.querySelector('form')
let input = document.querySelector('input')
let textarea = document.querySelector('textarea')
let checkbox = document.querySelector('input[type=checkbox]')
let radiobuttons = document.querySelectorAll('input[type=radio]:checked')

if (localStorage.getItem('param') !== null) {
  let param = JSON.parse(localStorage.getItem('param'));
  input.value = param.input
  textarea.value = param.textarea
  checkbox.checked = param.checkbox
}
document.addEventListener('input', function(e) {
  localStorage.setItem('param', JSON.stringify({input: input.value, textarea: textarea.value, checkbox: checkbox.checked}))
})
<form action="">
<input type="text"/>
<textarea name="t" id="text"></textarea>
<div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id=""/>
    <label class="form-check-label" for=""> Default checkbox </label>
</div>
<div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id=""/>
    <label class="form-check-label" for=""> Checked checkbox </label>
</div>
<div class="form-check">
    <input class="form-check-input" type="radio" name="" id=""/>
    <label class="form-check-label" for=""> Default radio </label>
</div>
<div class="form-check">
    <input
            class="form-check-input"
            type="radio"
            name=""
            id=""
    />
    <label class="form-check-label" for=""> Default radio </label>
    <div class="form-check">
        <input
                class="form-check-input"
                type="radio"
                name=""
                id=""
        />
        <label class="form-check-label" for=""> Default radio </label>
    </div>

    <select name="select" id="select">
        <option value="name1">name1</option>
        <option value="name2">name2</option>
        <option value="name3">name3</option>
    </select>
</div>
</form>

javascript

1 个回答

  1. Best Answer

    用您的id标记所有表单元素，并用一些属性标记应该保存的表单元素（在我的示例中是data-save）

    该脚本的作用：

    选择表单元素 然后在表单内查找具有 属性的所有元素data-save。

    更改时，它会遍历所有选定的元素，并将它们的值保存到具有结构的对象中[id_элемента]: значение_элемента ，并将其保存在 localStorage 中。

    加载页面时，从 localStorage 获取数据并通过其 id 写入所选元素

    const form = document.querySelector('form')
const saves = form.querySelectorAll('[data-save]');

document.addEventListener('DOMContentLoaded', () => {
  const param = JSON.parse(localStorage.getItem('param') || '{}');
  saves.forEach(item => {
    if (item.type === 'radio' || item.type === 'checkbox') {
      item.checked = param[item.id] ?? false
    } else {
      item.value = param[item.id] ?? ''
    }
  });
})

document.addEventListener('input', function(e) {
  const param = {} 
  saves.forEach(item => {
    param[item.id] = (item.type === 'radio' || item.type === 'checkbox') ? item.checked : item.value;
  });
  localStorage.setItem('param', JSON.stringify(param));
})
    <form action="">
  <input data-save type="text" id="inp1" /><br />
  <input data-save type="text" id="inp2" /><br />
  <textarea data-save name="t" id="text"></textarea><br />
  <textarea data-save name="t" id="text2"></textarea><br />
  <div class="form-check">
    <input data-save class="form-check-input" type="checkbox" value="0" id="inp3"/>
    <input data-save class="form-check-input" type="checkbox" value="1" id="inp4"/>
    <label class="form-check-label" for=""> Default checkbox </label>
  </div>
  <div class="form-check">
    <input data-save class="form-check-input" type="radio" value="0" id="inp5" name="r2" />
    <input data-save class="form-check-input" type="radio" value="1" id="inp6" name="r2" />
    <label class="form-check-label" for=""> Checked checkbox </label>
  </div>

  <select data-save name="select" id="select">
    <option value="name1">name1</option>
    <option value="name2">name2</option>
    <option value="name3">name3</option>
  </select>
</form>

    单选框和复选框类型的输入没有值；它们有一个选中属性。

    PS：也许我错过了一些类型或元素，我认为纠正这个脚本以适应它们的功能并不困难

    • 3

相关问题