get value from url than select the checkbox using javascript

Question

When I click on the checkbox dynamic url create. If I refresh the page than checkbox show selected if brand name have some value my javascript code working fine.

Shop?brand=Emporio,Primigi%2088&category=&gender=&start=2000&end=4000

The problem is if brand name contain space like primigi 88, Lee Cooper than it select all the checkbox. I want to select the checkbox only that is in url.

$(function() {
var getUrlParameter = function getUrlParameter(sParam) {

var sPageURL =
  decodeURIComponent(window.location.search.substring(1)),
  sURLVariables = sPageURL.split('&'),
  sParameterName,
  i;

for (i = 0; i < sURLVariables.length; i++) {
  sParameterName = sURLVariables[i].split('=');

  if (sParameterName[0] === sParam) {
    return sParameterName[1] === undefined ? true : sParameterName[1];
  }
}
  };
  var brand = getUrlParameter('brand');
  if (brand) {
var brand_array = brand.split(",");
for (var i = 0; i < brand_array.length; i++) {

  $('input[type=checkbox][value=' + brand_array[i] +
    ']').attr('checked', true); // this will working fine if categories name not contain any space

}
  }

  var category = getUrlParameter('category');
  if (category) {
var category_array = category.split(",");
for (var i = 0; i < category_array.length; i++) {
  $('input[type=checkbox][value=' + category_array[i] +
    ']').attr('checked', true);

}
  }

  var gender = getUrlParameter('gender');
  if (gender) {
var gender_array = gender.split(",");
for (var j = 0; j < gender_array.length; j++) {
  $('input[type=checkbox][value=' + gender_array[j] +
    ']').attr('checked', true);

}
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list-group">

  <h3>Brands</h3>
  <a href="#" class="list-group-item">
<input type="checkbox" class="item_filter brand" value="North East">North East</a>

  <a href="#" class="list-group-item">
<input type="checkbox" class="item_filter brand" value="Emporio">Emporio</a>

  <a href="#" class="list-group-item">
<input type="checkbox" class="item_filter brand" value="Lee Cooper">Lee Cooper</a>

  <a href="#" class="list-group-item">
<input type="checkbox" class="item_filter brand" value="Primigi 88">Primigi 88</a>

  <a href="#" class="list-group-item">
<input type="checkbox" class="item_filter brand" value="Us polo assn">Us polo assn</a>
</div>

Try changing $('input[type=checkbox][value=' + brand_array[i] + ']') to $('input[type=checkbox][value="' + brand_array[i] + '"]') — Mitya
– Mitya, Commented May 31, 2018 at 10:50

Rory McCrossan · Accepted Answer · 2018-05-31 12:17:56Z

1

The issue is because you need to wrap the value in the attribute selector in quotes so that the spaces are also included, eg:

$('input[type="checkbox"][value="' + gender_array[j] + '"]')

That being said there's a few things you can do to improve your logic. Firstly, use prop() instead of attr() where possible. Secondly, you don't need the function name when declaring a function as a variable.

Lastly, you can also DRY up the logic by removing the repeated block that checks the checkboxes by building one large array of all the filters and looping through that. Try this:

$(function() {
  var getUrlParameter = function(sParam) {
    // param retrieval logic...
  };

  var brands = (getUrlParameter('brand') || '').split(',');
  var categories = (getUrlParameter('category') || '').split(',');
  var genders = (getUrlParameter('gender') || '').split(',');
  var filters = brands.concat(categories).concat(genders);

  filters.forEach(function(filter) {
    $(`input[type="checkbox"][value="${filter}"]`).prop('checked', true);
  });
});

edited May 31, 2018 at 12:17

answered May 31, 2018 at 10:51

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

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

6 Comments

Mitya Over a year ago

Literally what I said. Probably should have posted it as an answer.

Rory McCrossan Over a year ago

True, although I added a section explaining how the OP can improve the logic by DRYing it up.

Mitya Over a year ago

Yeap fair enough. +1.

Rory McCrossan Over a year ago

No problem, glad to help

MK12 Over a year ago

$('input[type="checkbox"][value="' + filter + '"]').attr('checked', true); works this thanks

|

Collectives™ on Stack Overflow

get value from url than select the checkbox using javascript

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related