1

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: (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">

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

Improve this question
3
  • Please post your code what you already have tried! Commented Jan 19, 2016 at 13:51
  • You may be looking for $.param(). Commented Jan 19, 2016 at 13:54
  • stackoverflow.com/a/34878885/4763793 Commented Jan 20, 2016 at 3:50

3 Answers 3

Reset to default
4

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>

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

It's should looks like this:

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

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

Update

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.

Example (of 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

Improve this answer
Sign up to request clarification or add additional context in comments.

12 Comments

I can't seem to get this to work. it doesn't update the url. or do you have to update it manually?
Strange, no error on console. but doesn't seem to saving to the url.
saving to the url save where? The url (relative of course) is shown in the alert message. In the bin I did the redirect and you can see that after the redirect, the state of the checkboxes "saved"
in the search, for example www.example.com/index.html#homelikebox1=onlikebox2=on ect. . .
No I didn't store it in the hash. it's just convert it to a URL format. You can do with this whatever you want: Add it to the hash or as QueryString. The second script collect the data from the QueryString.
|
2

Using Jquery, based on this answer:

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

This would generate a string, containing the ids of all checked checkboxes. It works by iterating over all checkboxes on the page, saving the ids and then concatenating them with '&'. On loading the page you only have read the url parameters (e.g. http://website.com?checkbox1&checkbox2 would check checkbox1 and checkbox2) and check the boxes like you did with the local storage.

Improve this answer

Comments

0 
$('input[type=checkbox]')

should use 

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.