Question

我正在使用JQuery Mobile 我想在本地存储中获取的另一个页面中显示该值应检查第1页中已检查的内容

在HTML5中： -

<div data-role="page" id="page1">
    <div data-role="content">
         <div data-role="fieldcontain">
  <form>
   <fieldset data-role="controlgroup" data-type="horizontal">
    <legend>Levels:</legend>
     <input type="checkbox" value="One" name="one" id="checkbox-h-2a" class="custom1">
     <label for="checkbox-h-2a">One</label>
     <input type="checkbox" value="None" name="one" checked="checked" id="checkbox-h-2c" class="custom1">
     <label for="checkbox-h-2c">None</label>
   </fieldset>
  </form>
   </div>
   <div data-role="fieldcontain">
        <form>
   <fieldset data-role="controlgroup" data-type="horizontal">
    <legend>Mode:</legend>
     <input type="radio" name="Two" id="radio-choice-h-2a" value="On" checked="checked" class="custom2">
     <label for="radio-choice-h-2a">On</label>
     <input type="radio" name="Two" id="radio-choice-h-2b" value="Off" class="custom2">
     <label for="radio-choice-h-2b">Off</label>
   </fieldset>
  </form>
   </div>   
    </div>
</div>
<div data-role="page" id="page2">
     <div data-role="content">
        <div data-role="fieldcontain">
  <form>
   <fieldset data-role="controlgroup" data-type="horizontal">
    <legend>Levels:</legend>
     <input type="checkbox" name="checkbox-h-2a" id="checkbox-h-2a" class="custom1">
     <label for="checkbox-h-2a">One</label>
     <input type="checkbox" name="checkbox-h-2c"  id="checkbox-h-2c" class="custom1">
     <label for="checkbox-h-2c">None</label>
   </fieldset>
  </form>
   </div>
   <div data-role="fieldcontain">
        <form>
   <fieldset data-role="controlgroup" data-type="horizontal">
    <legend>Mode:</legend>
     <input type="radio" name="radio-choice-h-2" id="radio-choice-h-2a" value="on"  class="custom2">
     <label for="radio-choice-h-2a">Steward</label>
     <input type="radio" name="radio-choice-h-2" id="radio-choice-h-2b" value="off" class="custom2">
     <label for="radio-choice-h-2b">Guest</label>
   </fieldset>
  </form>
   </div>
     </div>
</div>

在Jquery： -

   function getRadioCheckedValue(radio_name)
    {
        var oRadio = $("input[type='radio']");
            for(var i = 0; i < oRadio.length; i++)
            {
                if(oRadio[i].checked)
                {
                    //return oRadio[i].value;
                    localStorage.setItem("mode", oRadio[i].value);
                }
    }
        return '';
    }

    function showSelectedNames(){
        var count = $("#checkid input:checked").length;
        var str = '';
        for(i=0;i<count;i++){
        if(i == count-1){
              str += $("#checkid input:checked")[i].value;
              localStorage.setItem("level", str);
        }
        else{
             str += $("#checkid input:checked")[i].value+',';
             localStorage.setItem("level", str);
        }
        }
        //alert("You selected----"+str);
    }

现在，Plz帮助我设置如何设置第2页中已经在Page1

中检查的值

Answer 1

最简单的方法是将复选框和单选按钮的值存储到数组中，然后将其保存到localStorage。但请注意，localStorage不接受数组，因此您需要先JSON.stringify()将其保存到localStorage，然后再JSON.parse()将其转换回可读数组。< / p>

以下是如何收集所有复选框和单选按钮的值，存储它们，然后在下一页阅读它们。

$(document).on("pagebeforehide", "[data-role=page]", function () {
    // variables
    var elements = [],
        id = '',
        value = '';

    // push values of checkboxes and radio buttons into an array
    $("[type=checkbox], [type=radio]", this).each(function () {
        id = $(this)[0].id;
        value = $(this).prop("checked");
        elements.push({
            "id": id,
                "value": value
        });
    });

    // convert array into a string
    // in order store it into localStorage
    localStorage["values"] = JSON.stringify(elements);
});

$(document).on("pagebeforeshow", "[data-role=page]", function () {
    // active page
    var active = $.mobile.activePage;

    // parse array of checkboxes and radio buttons
    var read_array = JSON.parse(localStorage["values"]);

    // check/uncheck checkboxes and radio buttons
    $.each(read_array, function (e, v) {
        var check_id = "#" + v.id,
            check_value = v.value;
        $(check_id, active).prop("checked", check_value).checkboxradio("refresh");
    });
});

注意：元素id在其他网页上应该相同。

<强> Demo

如何将复选框和单选框中的选中值存储在本地存储中

1 个答案: