Develop Reference

Updating URL with parameters from checkbox (without a hash)

I am using the following code snippet to pass parameters to URL so the specific search can be accessed via the generated link.
For example, if Potato is selected, then the URL changes to example.com#potato
However, instead of appending the URL with a hash, I want to append ?filter=
So if Potato is selected, I want the URL to change to example.com?filter=potato
How can I achieve this?
$(function() {
$(".vegetables, .seasoning").on("change", function() {
var hash = $(".vegetables:checked, .seasoning:checked").map(function() {
return this.value;
}).toArray();
hash = hash.join(",");
location.hash = hash;
});
if (location.hash !== "") {
var hash = location.hash.substr(1).split(",");
hash.forEach(function(value) {
$("input[value=" + value + "]").prop("checked", true);
});
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<h3>Filter recipes:</h3>
<div>
<p>Select vegetables</p>
<label><input type="checkbox" class="vegetables" value="potato"> Potato</label><br>
<label><input type="checkbox" class="vegetables" value="onion"> Onion</label><br>
<label><input type="checkbox" class="vegetables" value="tomato"> Tomato</label><br>
</div>
<div>
<p>Select seasoning</p>
<label><input type="checkbox" class="seasoning" value="salt"> Salt</label><br>
<label><input type="checkbox" class="seasoning" value="pepper"> Pepper</label><br>
<label><input type="checkbox" class="seasoning" value="chilli"> Chilli Flakes</label><br>
</div>

You can use pushState() to update the current URL without reloading the page:
$(".vegetables, .seasoning").on("change", function() {
var values = $(".vegetables:checked, .seasoning:checked").map((i, el) => el.value).get();
window.history.pushState({}, '', `?filter=${values.join(',')}`);
});

remember checkbox and radio button state after page reload

I am making a filter with jQuery and Laravel (PHP). It filters the data when I click the checkbox or radio button but, if I click checkbox or radio button and refresh the page the state of checked checkbox or radio button will no longer remain. I want the checked state to remain even after the page reloads.
This is my code.
<div class="search">
<input type="radio" name="expertise[]" value="backend" />programmer
<input type="radio" name="expertise[]" value="frontend" />programmer
</div>
<div class="avail">
<p>
<input type="checkbox" name="available[]" value="20" />20
</p>
<p>
<input type="checkbox" name="available[]" value="30" />30
</p>
</div>
jQuery
<script>
var expertise = [];
var available = [];
$(document).on('change', 'input[name="expertise[]"], input[name="available[]"]', function(e) {
e.preventDefault();
types = [];
available = [];
if (document.location.href.indexOf('filter') > -1) {
var url = '../developers/filter?type=dev';
} else {
var url = '/developers/filter?type=dev';
}
$('input[name="type[]"]:checked').each(function() {
expertise.push($(this).val());
url = url + '&expertise=' + $(this).val();
});
$('input[name="available[]"]:checked').each(function() {
available.push($(this).val());
url = url + '&available=' + $(this).val();
});
if (document.location.href.indexOf('filter') > -1) {
$.get('../developers/filter', {
type: 'dev',
expertise: expertise,
available: available,
}, function(markup) {
$('.dev-holder').html(markup);
});
} else {
$.get('developers/filter', {
type: 'dev',
expertise: expertise,
available: available,
}, function(markup) {
$('.dev-holder').html(markup);
});
}
window.history.pushState("", "", url);
});
</script>
Laravel controller
public function search(Request $request)
{
$type = $request->get('expertise');
$availability = $request->get('available');
$url = 'filter';
$users = User::where('type','dev')->where('is_approved', '=', 1);
if (!empty($type)) {
$users = $users->where('expertise','dev');
}
$users->when($availability, function ($query, $availability ) {
return $query->where(function ($whereQuery) use ($availability ) {
foreach ($availability as $item) {
$whereQuery->orWhere('avaibility', 'LIKE', $item);
}
});
});

You are already pushing things to the URL so when you load the page you can check the url query string for what's set or not.
$(function () {
var urlSearchParams = new URLSearchParams(window.location.search);
if (urlSearchParams.get('expertise[]')) {
$('input[name="expertise[]"][value="'+urlSearchParams.get('expertise[]')+'"]').prop('checked', true);
}
urlSearchParams.getAll('available[]').forEach(function (val) {
$('input[name="available[]"][value="'+val+'"]').prop('checked', true);
});
});
Note that the URLSearchParams needs to be polyfilled in IE
This can also be achieved via the HTML and Laravel:
<div class="expertise">
<input type="radio" name="expertise[]" id="backend" value="backend"
{{in_array('backend', request()->input('expertise',[])) ? 'checked' : ''}} />Backend
<input type="radio" name="expertise[]" id="frontend" value="frontend"
{{in_array('frontend', request()->input('expertise',[])) ? 'checked' : ''}}/>Frontend
</div>
<div class="availability">
<p>
<input type="checkbox" name="available[]" value="above30"
{{in_array('above30', request()->input('available',[])) ? 'checked' : ''}}
/>Above 30 hrs/week
</p>
<p>
<input type="checkbox" name="available[]" value="below30"
{{in_array('below30', request()->input('available',[])) ? 'checked' : ''}}
/>Below 30 hrs/week
</p>
</div>
This is assuming you have this HTML in a .blade.php file

U can use local storage for saving the state. Suppose if check box is clicked then store it in local storage and if page reloads make a function to extract data from the local storage and apply it.

JS/jQuery: Save into localStorage
PHP/Laravel: Save in session,
session_start();
if (!isset($_SESSION['vals']) {
$_SESSION['vals'] = 'default=stuff'
}
$_SESSION['vals'] //access it like this
and then you can change it when they submit
,
//set
let values = ["yes"]
localStorage.setItem('vals',JSON.stringify(values))
//retrieve
let result = localStorage.getItem('vals')
result = JSON.parse(result)
//use
if (result[0] = "yes") {
yourradiothing.checked = true
}
You can also store other things.

How do I keep single checkbox stay checked after refreshing the page?

HTML code:
<div class="wrap">
<h3>Background Swap:</h3>
<form action="" method="POST">
<div id="checkbox-container">
Shadowless background: <input type="checkbox" name="new_background" id="checker" <?php echo (isset($_POST['new_background']))? "checked='checked'": "";?>/><br /><br />
</div>
<input type="submit" name="submit" value="Upgrade Background" class="button" />
</form>
</div>
This will make the checkbox stays checked, but when page is refresh or exit and comes back, the checkbox will be unchecked. Therefore, after some research, I tried the localStorage, but doesn't seem to quite figure it out yet.
localStorage code:
var checkboxValue = JSON.parse(localStorage.getItem('checkboxValue')) || {};
var $checkbox = $("#checkbox-container :checkbox");
$checkbox.on("change", function(){
$checkbox.each(function(){
checkboxValue[this.id] = this.checked;
});
localStorage.setItem("checkboxValue", JSON.stringify(checkboxValue));
});
//on page load
$.each(checkboxValue, function(key, value){
$("#" + key).prop('checked', value);
});
I have script tags around the localStorage code and after implementing these codes, my checkbox still doesn't stays checked.
Both code as a whole:
<div class="wrap">
<h3>Background Swap:</h3>
<form action="" method="POST">
<div id="checkbox-container">
Background Swap: <input type="checkbox" name="new_background"/>
</div>
<script>
var checkboxValue = JSON.parse(localStorage.getItem('checkboxValue')) || {}
var $checkbox = $("#checkbox-container :checkbox");
$checkbox.on("change", function(){
$checkbox.each(function(){
checkboxValue[this.id] = this.checked;
});
localStorage.setItem("checkboxValue", JSON.stringify(checkboxValue));
});
//on page load
$.each(checkboxValue, function(key, value){
$("#" + key).prop('checked', value);
});
</script>
<input type="submit" name="submit" value="Upgrade Background" class="button"/>
</form>
</div>
I would like to thank everyone that took time to help me figure out the solution to my question with the biggest thanks to #Pranav C Balan!!! Check out the finished code # http://stackoverflow.com/a/44321072/3037257

I think your code is executing before the form elements are loading, so place it at the end of your code or wrap it using document ready handler to execute only after the elements are loaded. If you were placed the code before the element $("#checkbox-container :checkbox") would select nothing since it is not yet loaded in the DOM.
One more thing to do, in your code the checkbox doesn't have any id so add a unique id to the element to make it work since the JSON is generating using the id value.
<div class="wrap">
<h3>Background Swap:</h3>
<form action="" method="POST">
<div id="checkbox-container">
Background Swap: <input type="checkbox" id="name" name="new_background" />
</div>
<input type="submit" name="submit" value="Upgrade Background" class="button" />
</form>
<script>
var checkboxValue = JSON.parse(localStorage.getItem('checkboxValue')) || {}
var $checkbox = $("#checkbox-container :checkbox");
$checkbox.on("change", function() {
$checkbox.each(function() {
checkboxValue[this.id] = this.checked;
});
localStorage.setItem("checkboxValue", JSON.stringify(checkboxValue));
});
//on page load
$.each(checkboxValue, function(key, value) {
$("#" + key).prop('checked', value);
});
</script>
</div>
Working demo : FIDDLE
<script>
// document ready handler
// or $(document).ready(Function(){...
jQuery(function($) {
var checkboxValue = JSON.parse(localStorage.getItem('checkboxValue')) || {}
var $checkbox = $("#checkbox-container :checkbox");
$checkbox.on("change", function() {
$checkbox.each(function() {
checkboxValue[this.id] = this.checked;
});
localStorage.setItem("checkboxValue", JSON.stringify(checkboxValue));
});
//on page load
$.each(checkboxValue, function(key, value) {
$("#" + key).prop('checked', value);
});
});
</script>
<div class="wrap">
<h3>Background Swap:</h3>
<form action="" method="POST">
<div id="checkbox-container">
Background Swap: <input type="checkbox" id="name" name="new_background" />
</div>
<input type="submit" name="submit" value="Upgrade Background" class="button" />
</form>
</div>
Working demo : FIDDLE

An alternative to localStorage that only utilizes document.cookie:
$('input:checkbox').change(function() {
saveCookies();
});
To register the function and the actual function:
function saveCookies() {
var checkArray = [];
$('input.comic-check').each(function() {
if ($(this).is(':checked')) {
checkArray.push(1);
} else {
checkArray.push(0);
}
});
document.cookie = "checks=" + checkArray;
}
This is an alternative to localStorage, and depends on whether you want it to persist longer
And to retrieve the saved (on load)
var checks = getCookie("checks");
if (checks != "") {
checkArray = checks.split(',');
//unchecks boxes based on cookies
//also has backwards compatability provided we only append to the list in landing.ejs/generator.js
for (var i = 0; i < checkArray.length; i++) {
if (checkArray[i] == "0" && $('input.comic-check').length > i) {
var checkBox = $('input.comic-check')[i];
$(checkBox).prop('checked', false);
}
}
}
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}

Three situations you will need to check the checkbox
PHP have it set to checked="checked" (checked)
localStorage have it as true (checked)
all other situations this should be unchecked
all you need is to make sure first two situation you check the checkbox, then by default it is unchecked, but in your each you are also uncheck checkbox, therefore ignored the PHP part (as php set it to checked but localStorege set it to unchecked)
Example here: https://jsfiddle.net/dalinhuang/efwc7ejb/
//on page load
$.each(checkboxValue, function(key, value) {
if(value){
$("#" + key).prop('checked', value);
}
});

I would change:
<?php echo (isset($_POST['new_background']))? "checked='checked'": "";?>
for:
<?php echo (isset($_POST['new_background']) && $_POST['new_background']=="on")? "checked" : "";?>
In inline HTML, you don't need the checked attribute to be checked=checked.
Just checked is enought.
checked=checked is used in JavaScript to programatically check a checkbox.
EDIT
About your localStorage...
I made an example for you on CodePen
//on page load, check the appropriate checkboxes.
var onloadChecks = JSON.parse(localStorage.getItem("checkboxValue"))
$.each(onloadChecks, function(key, value){
$("#" + key).prop('checked', value);
});
// ================ Saving checks
// Checkboxes collection.
var allCheckboxes = $("input[type='checkbox']");
// On change handler.
allCheckboxes.on("change", function() {
// Check how many checkboxes we have.
var jsonCheckboxes = {};
console.log("There is "+allCheckboxes.length+" checkboxes.");
// Building the json.
for(i=0;i<allCheckboxes.length;i++){
console.log(allCheckboxes.eq(i).attr("id"));
console.log(allCheckboxes.eq(i).is(":checked"));
jsonCheckboxes[allCheckboxes.eq(i).attr("id")] = allCheckboxes.eq(i).is(":checked");
}
console.log("jsonCheckboxes: "+JSON.stringify(jsonCheckboxes));
// Setting localStorage.
localStorage.setItem("checkboxValue", JSON.stringify(jsonCheckboxes));
console.log("LocalStorage: "+ localStorage.getItem("checkboxValue") );
});

Working around your comment : my goal is to find something that will make my checkbox stays checked if the user choose to, here's a way to have the localStorage handle it :
jQuery (3.2.1)
$(document).ready(function() {
var bground = localStorage.getItem('background'); // get the value if exists
if (bground == 'shadow') { // checkbox has been previously checked
$('#checker').attr('checked', 'checked');
}
if (bground == 'shadowless') { // checkbox has been previously unchecked
$('#checker').attr('');
}
$('#submit').submit(function() { // when form is submitted
bground = localStorage.getItem('background'); // get the value in LS
if($('#checker').is(':checked')) // is it checked or not ?
{ sh = 'shadow'; } else { sh = 'shadowless'; }
localStorage.setItem('background', sh); // update LS with new value
});
});
HTML (added id="submit" to form)
<form action="" id="submit" method="POST">
<div id="checkbox-container">
Shadowless background: <input type="checkbox" name="new_background" id="checker" /><br />
</div>
<input type="submit" name="submit" value="Upgrade Background" class="button" />
</form>
This will make the checkbox stays checked, and when page is refreshed, the checkbox will be checked/unchecked depending on user's previous choice.
You could also use the jQuery change function instead of form submitting.
Just modify the line :
$('#submit').submit(function() { // comment/delete this line
// to the one below
// $('#checker').change(function() { // uncomment this line

selected checkbox even after reload the page

I need checkbox selected after page reload I am trying this code.
Here my check box
<tr>
<td class="label" style="text-align:right">Company:</td>
<td class="bodyBlack">
<%=c B.getCompanyName() %>
</td>
<td>
<input type="checkbox" class="bodyBlack" id="check" name="all" value='all' onClick="checkBox12()" style="margin-left:-691px">> Show all paid and unpaid transactions
<br>
</td>
</tr>
//here java script code
<script type="text/javascript">
function checkBox12() {
var jagdi = document.getElementById("check").value;
if (jagdi != "") {
document.getElementById("check").checked = true;
}
console.log("jagdi is " + jagdi);
//here my url
window.location.replace("/reports/buyers/statementAccount.jsp?all=" + jagdi);
return $('#check').is(':checked');
}
</script>

Add attribute checked=checked in your html input tag:
<input checked="checked" type="checkbox" class="bodyBlack" id="check" name="all" value='all' onClick="checkBox12()" style="margin-left:-691px"/>

Why don't you use only jQuery ?
function checkBox12()
{
var jagdi = false;
if($("#check").length != 0) // use this if you wanted to verify if the element #check is present
jagdi = $("#check").prop("checked");
//here my url
window.location.replace("/reports/buyers/statementAccount.jsp?all="+jagdi);
}
For answer your question, you can check your checkbox when the document is ready
$(document).ready(function() {
$("check").prop("checked", true");
});
But the better way is to add checked="checked" in your HTML. The checkbox will be checked by default. /!\ input need "/" in close tag
<input type="checkbox" class="bodyBlack" id="check" name="all" value='all' onClick="checkBox12()" style="margin-left:-691px" checked="checked" />

It looks like you are using some other base language. I use php , and it overs POST, GET and SESSION to store values globally and for time you need.
Better find a equivalent function in your language. worth it in long term and on project expansion.

You can store state of checkbox on cookie and repopulate it after page reload.
also there is an example in here HERE!
$(":checkbox").on("change", function(){
var checkboxValues = {};
$(":checkbox").each(function(){
checkboxValues[this.id] = this.checked;
});
$.cookie('checkboxValues', checkboxValues, { expires: 7, path: '/' })
});
function repopulateCheckboxes(){
var checkboxValues = $.cookie('checkboxValues');
if(checkboxValues){
Object.keys(checkboxValues).forEach(function(element) {
var checked = checkboxValues[element];
$("#" + element).prop('checked', checked);
});
}
}
$.cookie.json = true;
repopulateCheckboxes();

validatin script for radio button not Working

I am getting errors. The script is not working. Help
thanks in advance.
I want to check if all my set of radio buttons are checked when button next is click.
other ways of doing this also are welcome
<div class="qheader">
9) What's the world's most widely spoken language?</div>
<div class="qselections">
<input type="radio" value="a" name="question9">a) English<br>
<input type="radio" value="b" name="question9">b) Spanish<br>
<input type="radio" value="c" name="question9">c) Mandarin<br>
<input type="radio" value="d" name="question9">d) French<br>
</div><br>
<div class="qheader">
10) Which continent is host to the most countries in the world?</div>
<div class="qselections">
<input type="radio" value="a" name="question10">a) Asia<br>
<input type="radio" value="b" name="question10">b) Africa<br>
<input type="radio" value="c" name="question10">c) Europe<br>
</div>
</div>
<input type="button" value="Next" name="B3" onclick="showdesc()">
<script>
$(function() {
$(document).on('click', 'form', function () {
var validate = true;
var unanswered = new Array();
// Loop through available sets
$('.qselections').each(function () {
// Question text
var question = $(this).prev().text();
// Validate
if (!$(this).find('input').is(':checked')) {
// Didn't validate ... dispaly alert or do something
unanswered.push(question);
validate = false;
}
});
if (unanswered.length > 0) {
msg = "Please answer the following questions:\n" + unanswered.join('\n');
alert(msg);
}
return validate;
});
});
</script>

function clicked() {
var validate = true;
var unanswered = new Array();
// Loop through available sets
$('.qselections').each(function () {
// Question text
var question = $(this).prev().text();
// Validate
if (!$(this).find('input').is(':checked')) {
// Didn't validate ... dispaly alert or do something
unanswered.push(question);
validate = false;
}
});
if (unanswered.length > 0) {
msg = "Please answer the following questions:\n" + unanswered.join('\n');
alert(msg);
}
return validate;
}
JSFiddle
I reproduced your problem with slight modifications, works well for me. I guess it's just a syntax error in the portion of your code, not present in the fiddle. Cross check and let me know.
Try and modify your click call, make it direct like in the fiddle.

//try this script
if(!$(this).find("input[name=radio]").is(':checked')){
alert("hi");
}