Adding a parameter to URL with checkbox (jQuery)

Question

I'm adding ?show={COUNTRY CODE} to URL as a parameter. I managed to add it with the code below but can't remove it when you unselect the checkbox.

$.urlParam = function(name) {
  var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
  if (results) {
    return results[1];
  } else {
    return 0;
  }
}

$('#uc').click(function() {

  var country = $(this).val();
  var site_url = $('body').data('site-url');
  var url = $('body').data('url');

  window.location.href = site_url + url + '?show=' + country;
});

if ($.urlParam('show') == $('#uc').val()) {
  $('#uc').attr('checked', true);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="uc" id="uc" value="UK"> <label for="uc">Only UK</label>

here is the answer https://stackoverflow.com/questions/16941104/remove-a-parameter-to-the-url-with-javascript — jishnu_vp_1998, Jan 22 '20 at 10:59

score 1 · Accepted Answer · answered Jan 22 '20 at 11:18

1

Use the condition to check the checkbox is clicked or not.

if ($(this).is(':checked')) {
    console.log(site_url + url + '?show=' + country)
 } else {
    console.log(site_url + url)
  }

answered Jan 22 '20 at 11:18

Shashikant

103
3

score 0 · Answer 2 · answered Jan 22 '20 at 10:54

Use change() not click() then check with .is(':checked')

$.urlParam = function(name) {
  var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
  if (results) {
    return results[1];
  } else {
    return 0;
  }
}

$('#uc').change(function() {

  var country = $(this).val();
  var site_url = $('body').data('site-url');
  var url = $('body').data('url');
  var site_url = 'google.com' // temp remove later
  var url = '/sd/' // temp remove later


  if ($(this).is(':checked')) {
    console.log(site_url + url + '?show=' + country)
    //window.location.href = site_url + url + '?show=' + country; // uncomment later
  } else {
    console.log(site_url)
    //window.location.href = site_url; // uncomment later
  }

});

if ($.urlParam('show') == $('#uc').val()) {
  $('#uc').attr('checked', true);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="uc" id="uc" value="UK"> <label for="uc">Only UK</label>

Adding a parameter to URL with checkbox (jQuery)

2 Answers2

Linked