如何使用javascript或jquery存储复选框值?

时间:2016-01-19 13:50:49

标签: javascript jquery

我有多个复选框。我已将复选框值存储到本地存储,使用户能够刷新页面并仍显示已选中或未选中的复选框。现在我需要将复选框值保存为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">

更新:请注意我使用的是标签式导航菜单,并在网址中添加了标签页哈希值。因此,网址看起来就像: www.example.com/index.html#home

3 个答案:

答案 0 :(得分:2)

您可以使用.serialize(),但必须更改$('button').click(function(){ alert($('input').serialize()); }); atrribute的值。

<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>
checkboxes

下一步是从QueryString获取值并设置$.each(location.search.replace('?', '').split('&'), function(i, seg) { $('[name=' + seg.split('=')[0] + ']').attr('checked', 'checked'); });

应该是这样的:

hash

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

更新

当用户使用pushState选中/取消选中复选框或执行hash时,您可以执行“自动保存”并将参数添加到网址中(如果由于某种原因您不能使用为此使用pushState。当然,您需要先检查browsers support

示例(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">
{{1}}

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

答案 1 :(得分:1)

使用Jquery,基于this回答:

var gulp = require('gulp');
var mocha = require('gulp-mocha');
var util = require('gulp-util');

gulp.task('myreport', function() {
    return gulp.src(['tests.js'], { read: false })
        .pipe(mocha({ reporter: 'json' }))  //how do I write this to a file?
        .on('error', util.log);
});

这将生成一个字符串,其中包含所有已选中复选框的ID。它的工作原理是迭代页面上的所有复选框,保存id,然后用'&amp;'连接它们。在加载页面时,您只读取了url参数(例如http://website.com?checkbox1&checkbox2将检查checkbox1和checkbox2)并选中与您使用本地存储相关的方框。

答案 2 :(得分:0)

$('input[type=checkbox]')

应该使用

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