javascript - 检查表单中的复选框并获取属性而不是值

Question

我有一个表单，它作为字符串保存到本地存储中。然而，我的表单几乎没有使用 attribute 而不是 value 的复选框、单选按钮等。如何执行此类检查并将正确的“值”传递到 dataSave 函数中的本地存储？

function dataSave(){
   var mngrFields = {};
   $(".mngr-field").each(function(){
      if ($(".mngr-field").is("checkbox")){
         mngrFields[this.id] = this.attr("checked");
      } else {
         // Default method to get input-text values
         mngrFields[this.id] = this.value;
      }
   });
   localStorage.setItem('fieldString', JSON.stringify(mngrFields));
}

获取输入文本值的默认方法本身工作得很好，但是当包含复选框检查器时，它会因为错误而破坏整个应用程序。

关于如何构建一个也可以用于单选按钮的良好检查器，有什么想法吗？

Answer 1

一般来说，您需要做的只是检查输入字段的类型并检测单选框和复选框的 checked 属性 - 它们都有 true/false > 为了它。以下是包含所有基本 HTML 类型的示例:

<input class="mngr-field" type="radio" id="field-01" checked> Checked radio<br>
<input class="mngr-field" type="radio" id="field-02"> Unchecked radio<br>
<input class="mngr-field" type="checkbox" id="field-03" checked> Checked checkbox<br>
<input class="mngr-field" type="text" id="field-04"> Comment on how it went?<br>
<select class="mngr-field" id="field-05">
    <option value="">Rate</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select> Rate it<br>
<textarea class="mngr-field" id="field-06">Area text</textarea><br>
<input type="button" value="Save to LS" onclick="dataSave()">
<script>
    function dataSave() {
        var mngrFields = {};
        $('.mngr-field').each(function () {
            if(this.type == 'radio' || this.type =='checkbox')
                mngrFields[this.id] = this.checked;
            else
                mngrFields[this.id] = this.value;
        });
        localStorage.setItem('fieldString', JSON.stringify(mngrFields));
        console.log(JSON.parse(localStorage.getItem('fieldString')));
    }
</script>

控制台日志输出:

Object {field-01: true, field-02: false, field-03: true, field-04: "Input text", field-05: "2", "field-06":"Area text"}
    field-01: true
    field-02: false
    field-03: true
    field-04: "Input text"
    field-05: "2"
    field-06: "Area text"

我确信您知道如何继续处理 localStorage 字符串。 :)