Question

当我点击复选框动态url创建时。如果我刷新页面而不是复选框显示选中，如果品牌名称有一些价值我的javascript代码正常工作。

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

问题是如果品牌名称包含像primigi 88，Lee Cooper这样的空间而不是选中所有复选框。我想选择仅在url中的复选框。

＆＃13;

$(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);

}
  }
});

＆＃13;

<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>

＆＃13;

Answer 1

问题是因为您需要将属性选择器中的值包装在引号中，以便包含空格，例如：

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

话虽如此，您可以采取一些措施来改善逻辑。首先，尽可能使用prop()代替attr()。其次，在将函数声明为变量时，不需要函数名称。

最后，您还可以通过删除重复的块来清除逻辑，该块通过构建所有过滤器的一个大型数组并循环遍历来检查复选框。试试这个：

$(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);
  });
});

从url获取值比使用javascript选中复选框

1 个答案: