Question

我对localStorage表单有几个问题。

所以我有这三种类型的输入：

选择
复选框

无线电

<form id="form54" name="form54" enctype="multipart/form-data" method="post" action="#public">

    <!-- select -->
    <div>
        <select name="Q1">
            <option value="0">opt1</option>
            <option value="1">opt2</option>
            <option value="2">opt3</option>
            <option value="other">Other</option>
        </select>

        <textarea id="Q-option-other-value" class="with-attachments" maxlength="100" placeholder="placeholder" name="Q1-other"></textarea>
    </div>

    <br><br>

    <!-- checkbox -->
    <div>
        <input id="opt3a" type="checkbox" name="Qthree" value="" store="opt2a">
        <label for="opt3a">opt1</label>

        <input id="opt3b" type="checkbox" name="Qthree" value="" store="opt2b">
        <label for="opt3b">opt2</label>

        <input id="opt3c" type="checkbox" name="Qthree" value="other" store="opt2c">
        <label for="opt3c">Other</label>

        <textarea id="Q3-checkbox-other-value" class="with-attachments" maxlength="150" placeholder="placeholder" name="Q3-other"></textarea>
    </div>            

    <br><br>

    <!-- radio -->  
    <div>
        <input id="opt4a" type="radio" name="Qfour" value="1" store="opt4a">
        <label for="opt4a" class="label-for-radio">opt1</label>

        <input id="opt4b" type="radio" name="Qfour" value="2" store="opt4b">
        <label for="opt4b" class="label-for-radio">opt2</label>

        <input id="opt4c" type="radio" name="Qfour" value='scheduled' store="opt4c">
        <label for="opt4c" class="label-for-radio">other</label>

        <input class="absolute" type="date" name="Qfour">
    </div>

对于每一个，我都有一个“特殊选项”，如果选择了该选项，则会显示不同的输入。

另外，我有localStorage，但我无法使其适用于复选框和广播。它只适用于textarea和input = select。

我在jQuery中有一些脚本：

输入选择：如果选择了值=其他，则显示textarea
输入复选框：单击textarea时选择值=其他
输入复选框：如果未选择value = other，请更改textarea css
输入广播：如果选中了val = scheduled，则显示type = date
LocalStorage：保存并清除textareas的localstorage并输入select

缺少什么 - 在这里我需要你的帮助

输入选择：隐藏textarea如果未选择select = other ON PAGE LOAD（使用localStorage，如果保存了数据，即使select = other未选中，textarea也可见.ps。如果你放（显示：如果select = other，则textarea将不可见，因此无法解决问题）
LocalStorage用于复选框和广播（带按钮以保存和删除数据）

小提琴：http://jsfiddle.net/sandrin4p/ury7dvt5/17/

Answer 1

只需设置选择，收音机和复选框输入的值就不会有诀窍。 .val（）函数只设置值=＆＃34;＆＃34;属性。

if (localStorage.getItem("flag") == "set") {

        var data= $("#form54").serializeArray();

        $.each(data, function(i, obj) {

            console.log(i, obj);

            if($("[name='" + obj.name +"']").attr('type') === 'radio' ||
               $("[name='" + obj.name +"']").attr('type') === 'checkbox') {

              if(obj.name) $("[name='" + obj.name +"']").prop('checked', true);
              else $("[name='" + obj.name +"']").prop('checked', false);

            } else if( $("[name='" + obj.name +"']").attr('type') === 'select') {
                if(obj.name) $("[name='" + obj.name +"'] option[value='" + obj.value +"']").prop('selected', true)
                else $("[name='" + obj.name +"'] option[value='" + obj.value +"']").prop('selected', false)

            } else 
              $("[name='" + obj.name +"']").val(localStorage.getItem(obj.name) );
            }

        });

    }

应该做的伎俩。（对不起任何拼写错误就这么快就做了（我不知道你的对象是否有.value道具。

但我认为你明白了。

祝你好运

LocalStorage input = radio ||复选框||选择＆amp;＆amp; show div if：check on load

1 个答案: