如何使用 javascript 或 jquery 存储复选框值？答案

【问题标题】：How to store check box values using javascript or jquery?如何使用 javascript 或 jquery 存储复选框值？
【发布时间】：2020-07-27 20:17:55
【问题描述】：

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

HTML：（复选框）

<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。因此，一个 url 已经看起来像：www.example.com/index.html#home

【问题讨论】：

请发布您已经尝试过的代码！
您可能正在寻找$.param()。
stackoverflow.com/a/34878885/4763793

标签： javascript jquery

【解决方案1】：

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

$('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。

应该是这样的：

$.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 时，您可以执行“自动保存”（这很好，以防由于某种原因您不能使用@987654332 @ 为了这）。当然你需要先检查browsers support。

示例（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

【讨论】：

我似乎无法让它工作。它不会更新网址。还是必须手动更新？
奇怪，控制台没有错误。但似乎没有保存到网址。
saving to the url 保存在哪里？ url（当然是相对的）显示在警报消息中。在 bin 我做了重定向，你可以看到重定向后，复选框的状态“已保存”
在搜索中，例如 www.example.com/index.html#homelikebox1=onlikebox2=on 等。 . .
不，我没有将它存储在hash 中。它只是将其转换为 URL 格式。您可以随心所欲地使用它：将其添加到 hash 或作为 QueryString。第二个脚本从 QueryString 中收集数据。

【解决方案2】：

使用Jquery，基于this答案：

var checkArray = new Array(); 
$('input[type=checkbox]').each(function () {
    if (this.checked) checkArray.push(this.id)
});
var urlParameter = checkArray.join('&')

这将生成一个字符串，其中包含所有选中复选框的 ID。它的工作原理是遍历页面上的所有复选框，保存 id，然后将它们与 '&' 连接起来。在加载页面时，您只需要阅读 url 参数（例如，http://website.com?checkbox1&checkbox2 将选中复选框 1 和复选框 2）并像使用本地存储一样选中复选框。

【讨论】：

【解决方案3】：

$('input[type=checkbox]')

应该使用

$("input[type='checkbox'][name='likebox']").each( ...

【讨论】：