Как передать имя и значение флажка в href - PullRequest
Новая
       4

Как передать имя и значение флажка в href

0 голосов
/ 11 октября 2019

Я устанавливаю форму для фильтрации сообщений в WordPress по настраиваемым полям (плагин ACF). Я показываю множественный выбор по группам:

Материал: дерево, камень, мрамор Город: Нью-Йорк, Лондон, Париж Тип: ... цвет: ... 

<form>
<div class="input-group">Material
  <label class="btn">
     <input type=checkbox name="material" value="wood">Wood
  </label>
  <label class="btn">
     <input type=checkbox name="material" value="stone">Stone
  </label>
  <label class="btn">
     <input type=checkbox name="material" value="marble">Marble
  </label>
</div>

etc

<a href="" class="button">Go</a>
</form>

Я нахожусценарий, но если я проверяю только один вход, он показывает другие тоже, например, я проверяю дерево и мрамор> http://www.example.com/?material=wood,marble&city=&type=&color=

Я хотел бы http://www.example.com/?material=wood,marble

This is the script
jQuery(document).ready(function($) {
    $('form').find('input[type="checkbox"]').on('click', function() {
    var material = [];
    var city = [];
    var type = [];
    var color = [];
    $('form').find('input[type="checkbox"]:checked').each(function(index, val) {
        if ($(val).attr('data-attr-name') === 'material') {
        material.push($(val).val());
        }
        if ($(val).attr('data-attr-name') === 'city') {
        city.push($(val).val());
        }
        if ($(val).attr('data-attr-name') === 'type') {
        type.push($(val).val());
        }
        if ($(val).attr('data-attr-name') === 'color') {
        color.push($(val).val());
        }
    });
        var url = "http://www.example.com/?" + "material=" + material.toString('') + "city=" + city.toString('') + "&type=" + type.toString('') + "&color=" + color.toString('');
        $('a.button').attr('href', url);
    });
});

1 Ответ

0 голосов
/ 11 октября 2019

Может быть, этот пример поможет вам 

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js">
</script>
<script>
  var material = [], city =[], type =[], color = [];
   $(document).on('click', 'input[type="checkbox"]',function(index, val) {
      var val = $(this).attr("name");
    if($(this).is(":checked") ){
       switch(val){
        case 'material':
            material.push($(this).val());
        break;
        case 'city':
            city.push($(this).val());
        break;
        case 'type':
            type.push($(this).val());
        break;
        case 'color':
            color.push($(this).val());
        break;
      }
    }
    else{
    	switch (val){
      case 'material':
           if(material.indexOf($(this).val()) > -1) material.splice(material.indexOf($(this).val()),1);
        break;
        case 'city':
            if(city.indexOf($(this).val()) > -1) city.splice(city.indexOf($(this).val()),1);
        break;
        case 'type':
            if(type.indexOf($(this).val()) > -1) type.splice(type.indexOf($(this).val()),1);
        break;
        case 'color':
            if(color.indexOf($(this).val()) > -1) color.splice(color.indexOf($(this).val()),1);
        break;
    }
    }
    var url = "";
  if(material.length || city.length || type.length || color.length)
     url = "http://www.example.com/?" + (material.length ? "material=" + material.join() : "" )+ (city.length ? "&city=" + city.join() : "")+  (city.length ? "&type=" + type.join() : "") +  (color.length ?  "&color=" + color.join() :"");
        $('a.button').attr('href', url);
    });
</script>
</head>
<body>

<form>
<div class="input-group">Material
  <label class="btn">
     <input type=checkbox name="material" value="wood">Wood
  </label>
  <label class="btn">
     <input type=checkbox name="material" value="stone">Stone
  </label>
  <label class="btn">
     <input type=checkbox name="material" value="marble">Marble
  </label>
</div>
<a href="" class="button">Go</a>

</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...