Javascript 如何将复选框和单选框中的选中值存储在本地存储器中
我正在使用JQuery手机 我想在另一个页面中显示从本地存储获取的值 应检查第1页中已检查的内容 在HTML5中:-Javascript 如何将复选框和单选框中的选中值存储在本地存储器中,javascript,jquery,html,jquery-mobile,Javascript,Jquery,Html,Jquery Mobile,我正在使用JQuery手机 我想在另一个页面中显示从本地存储获取的值 应检查第1页中已检查的内容 在HTML5中:- <div data-role="page" id="page1"> <div data-role="content"> <div data-role="fieldcontain"> <form> <fieldset data-role="controlgroup" data-type="ho
<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);
}
函数getRadioCheckedValue(无线电名称)
{
var oRadio=$(“输入[type='radio']”);
for(var i=0;ilocalStorage
。但是,请注意localStorage
不接受数组,因此在将其保存到localStorage
之前需要JSON.stringify()
,然后保存到JSON.parse()
将其转换回可读数组
下面是如何收集所有复选框和单选按钮的值,存储它们,然后在下一页上读取它们
$(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
在其他页面上应相同
看看这个…这会帮助你…@SindhuSounderrajan很抱歉,根据我的要求,这对我来说不是一个正确的答案。你没有尝试任何东西吗?你的代码中没有一行js,这是为什么?@mikakun bcoz我不知道该写什么你想将复选框/无线电值从第1页传递到第2页?在JQM中,你不能使用同一个ID两次,即使它们在两个上不同的页面。@Drew您可以,只要您指定要查找该
id
的页面。这就是我使用$的原因。mobile.activePage
@Omar ur code工作正常,但如果html5中的页面太多,则在第1页中它已被更改,我想在第6页中显示它将如何工作work@Omar现在如何设置复选框的id这是被选中的,因为根据这一点,我必须在html5@AtulDhanuka在答案中选择相同的演示。结果将在您转到下一页时显示。