CODEWITHSUNDEEP
javascriptjquery
About Leros
About Leros

Reputation: 190

How to store check box values using javascript or jquery?

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

Upvotes: 1

Views: 5861

Answers (3)

Muhammad Zeeshan Ansari
Muhammad Zeeshan Ansari

Reputation: 36

$('input[type=checkbox]')

should use 

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

Upvotes: 0

Mosh Feu
Mosh Feu

Reputation: 29277

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

Upvotes: 4

BenSower
BenSower

Reputation: 1612

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.

Upvotes: 2

Related Questions