如何使用javascript或jquery存储复选框值? [英] How to store check box values using javascript or jquery?

问题描述

我有多个复选框.我已经将复选框的值存储到本地存储中，从而使用户可以刷新页面，并且仍然显示选中或未选中的复选框.现在，我需要将复选框值另存为url参数，以便可以将页面作为链接发送，并保留所有未选中或选中的值.下面的代码:

I have multiple checkboxes. I have stored the checkbox values to the local storage, enabling the user to refresh the page and still have the checked or unchecked checkboxes displayed. Now I need to save the check box value as a url parameter, so that the page can be sent as a link retaining all the unchecked or checked values. Code below:

HTML :(复选框)

HTML: (check boxes)

<input type="checkbox" class="faChkRnd" name="likebox" id="like">
<input type="checkbox" class="faChkRnd" name="likebox" id="like1">
<input type="checkbox" class="faChkRnd" name="likebox" id="like2">
<input type="checkbox" class="faChkRnd" name="likebox" id="like2">

更新:请注意，我使用的是选项卡式导航菜单，并已在URL中添加了选项卡哈希.因此，网址已经看起来像: www.example.com/index.html#home

Update: please note I'm using a tabbed navigation menu and have added tab hash to url. Therefore a url will already look something like: www.example.com/index.html#home

推荐答案

您可以使用 .serialize()，但您必须更改name属性的值.

You can use .serialize() but you have to change the name atrribute's values.

$('button').click(function(){
  alert($('input').serialize());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="faChkRnd" name="likebox1" id="like">
<input type="checkbox" class="faChkRnd" name="likebox2" id="like1">
<input type="checkbox" class="faChkRnd" name="likebox3" id="like2">
<input type="checkbox" class="faChkRnd" name="likebox4" id="like2">
<button>getUrl</button>

下一步是从QueryString中获取值并设置checkboxes.

The next step is to get the values from the QueryString and set the checkboxes.

它应该看起来像这样:

$.each(location.search.replace('?', '').split('&'), function(i, seg) {
   $('[name=' + seg.split('=')[0] + ']').attr('checked', 'checked');
});

http://jsbin.com/hecora/edit?html,js

更新

当用户使用hash选中/取消选中复选框时，您可以执行自动保存"，或者执行pushState并将参数添加到url(如果出于某种原因您不能使用为此).当然，您需要首先检查浏览器支持.

You can do "auto saving" when the user check/uncheck the checkboxes using hash or do pushState and add the params to the url (That's good in case from some reason you can't use the hash for this). Of course you need to check the browsers support first.

(pushState的示例):

var checkboxes = $('input[type="checkbox"]');
checkboxes.change(function() {
  var ser = '?' + checkboxes.serialize();
  history.pushState(null, null, ser);
});

$.each(location.search.replace('?', '').split('&'), function(i, seg) {
  $('[name=' + seg.split('=')[0] + ']').attr('checked', 'checked');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="checkbox" class="faChkRnd" name="likebox1" id="like">
<input type="checkbox" class="faChkRnd" name="likebox2" id="like1">
<input type="checkbox" class="faChkRnd" name="likebox3" id="like2">
<input type="checkbox" class="faChkRnd" name="likebox4" id="like2">

http://jsbin.com/nofoto/edit?html,js

这篇关于如何使用javascript或jquery存储复选框值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！