Можно ли отфильтровать два входных значения с помощью одного флажка? - PullRequest
Новая
       22

Можно ли отфильтровать два входных значения с помощью одного флажка?

0 голосов
/ 04 декабря 2018

Я использую флажки для отображения и фильтрации точек данных json.Возможно ли что-то написанное как value ниже этого?

Пример Флажок html: 

<input class="star" type="checkbox" value="4,4.5" id="s4" name="check" />

Ответы [ 3 ]

0 голосов
/ 04 декабря 2018

Вы можете использовать jquery со скрытым вводом. 

<script>
 $(document).on('change','#s4',function(){
  $(this).is(':checked'){
   $(this).next().val('4,4.5');
  }else{
   $(this).next().val('');
  }
 });
</script>
<input class="star" type="checkbox" id="s4"/>
<input type="hidden"name="check"/>
0 голосов
/ 05 декабря 2018

Я нашел решение своего вопроса.Возможно, вопрос вводил в заблуждение, потому что это была небольшая часть более крупного проекта.

Но я нашел быстрое и грязное решение, которое, вероятно, не имеет лучшего синтаксиса.Пожалуйста, прокомментируйте, если вы думаете, что я все равно могу это почистить, так как я все еще учусь.

Пример HTML: 

<div class="boxes">
  <input class="star" type="checkbox" value="4" id="s4" name="4.5" />
  <label for="s4"><img src="img/4star.png"></label>
</div>
<div class="boxes">
  <input class="star" type="checkbox" value="3" id="s3" name="3.5" />
  <label for="s3"><img src="img/3star.png"></label>
</div>
<div class="boxes">
  <input class="star" type="checkbox" value="2" id="s2" name="2.5" />
  <label for="s2"><img src="img/2star.png"></label>
</div>

Я фильтровал данные JSON 4-4,5 или 3-3,5 и т. Д. Я использовал входные данные value и name для извлечения обоих экземпляров..

Вот код, который я использовал: 

$('#star-filter').delegate('input[type=checkbox]', 'change', function() {
  $('input.star').not(this).prop('checked', false);  
  var $list = $('.leaflet-zoom-animated > g > circle'),
  $checked = $('input:checked');    
  if ($checked.length) {                            
    var sel = '';
    var selector = '';
    $($checked).each(function(index, element){
      sel += "[data-staralt~='" + element.name + "']";  
      selector += "[data-star~='" + element.value + "']";   
    });                        
    $list.hide();
    $('.leaflet-zoom-animated > g > circle').filter(sel).show();
    $('.leaflet-zoom-animated > g > circle').filter(selector).show();
  }
  else {
    $list.show();
  }
});
0 голосов
/ 04 декабря 2018

Возможно, было бы полезно, если бы вы описали то, что пытались достичь на простом английском языке.

Взглянув на тип ввода флажка: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox

Вы можете присвоить значение = "что угодно", и это значение будет передано при отправке формы (или будет доступно черезjavascript / jquery).

Похоже, вы пытаетесь создать какую-то систему рейтинга (я вижу "звездочка" и "4, 4.5").Вы можете изучить использование другого элемента (span?) Или даже list (), стилизацию отдельных элементов списка и вычисление значения с использованием javascript.

Опять же, было бы полезно, если бы вы могли уточнить, что вы пытаетесьдостичь.

РЕДАКТИРОВАТЬ: На второй мысли, да.Вы можете определенно сохранить значение типа «4,4.5» в свойстве значения флажка.Если вы хотите рассматривать «4» и «4.5» как отдельные значения, я полагаю, что вы можете запустить .split (','), чтобы получить массив значений, разделенных запятыми.

...