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