Проверьте, находятся ли значения выбранных флажков в атрибуте данных - PullRequest
Новая
       25

Проверьте, находятся ли значения выбранных флажков в атрибуте данных

0 голосов
/ 07 марта 2019

Мне нужно выяснить, можно ли найти значения выбранных флажков в атрибуте данных данного div.

Только если отмечены ВСЕ флажки со значениями, найденными в атрибуте данных,результат должен быть ИСТИННЫМ.Если один или несколько флажков со значениями, найденными в атрибуте данных, не отмечены, результатом должно быть ЛОЖЬ.

Примеры: 

<div id="towns" data-attribute="FRA, BER, HAM">...</div>

Выбранные флажки: FRA,BER => Результат: false

Выбранные флажки: BER, HAM, MUC => Результат: false

Выбранные флажки: FRA, BER, HAM => Результат: true

Выбранные флажки: FRA, BER, HAM, MUC => Результат: true 

$("input[type=checkbox]:checked").each(function() {

  console.log($("#testdiv").data("town").split(",").indexOf($(this).val()) > -1);
  
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<input type="checkbox" value="FRA" checked />
<input type="checkbox" value="BER" checked />
<input type="checkbox" value="HAM" />
<input type="checkbox" value="MUC" />

<div id="testdiv" data-town="FRA, BER, HAM">
  Lorem ipsum
</div>

В настоящее время я знаю только результат одного значения флажка.Но мне нужен результат false, если один из городов, представленных в атрибуте data, отсутствует.

Ответы [ 7 ]

2 голосов
/ 07 марта 2019

Вы можете получить все значения, хранящиеся в data-town в виде массива.И затем цикл через этот массив.И проверьте, если вход с этими значениями, если checked, используя every().И вы должны split() по ", " 

document.querySelectorAll('input[type="checkbox"]').forEach(e => {
  e.addEventListener('click',() => console.log(check()));
})


function check(){
  let vals = $("#testdiv").data("town").split(", ")
  return vals.every(val => $(`input[value="${val}"]`).prop('checked'));
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<input type="checkbox" value="FRA" checked />
<input type="checkbox" value="BER" checked />
<input type="checkbox" value="HAM" />
<input type="checkbox" value="MUC" />

<div id="testdiv" data-town="FRA, BER, HAM">
  Lorem ipsum
</div>

, где ${val} происходит от

:
Я использую Array.prototype.every(), и он принимает функцию обратного вызова.Первый аргумент ссылается на элемент массива.Что в данном случае val.См Array.prototype.every()
1 голос
/ 07 марта 2019

Рабочий пример ниже, итерация просто обратная: мы перебираем город каждого атрибута города данных (обратите внимание на обрезку).

Array.prototype.every проверяет, соответствует ли указанное условиеСелектор "$ (" input [type = checkbox] [value = "+ t +"]: selected ") имеет длину> 0" для всех элементов в dataTown.

Если это так, мы записываем true.

Ведение журнала происходит при изменении состояния флажка. 

$('input').change(function() {
    var dataTown = $("#testdiv")
                       .data("town")
                       .split(",")
                       .map(function(t) { return t.trim();});
    console.log(
        dataTown.every(
            function(t) {
                return $("input[type=checkbox][value=" + t +"]:checked").length > 0;
            }
        )
    );

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<input type="checkbox" value="FRA" checked />
<input type="checkbox" value="BER" checked />
<input type="checkbox" value="HAM" />
<input type="checkbox" value="MUC" />

<div id="testdiv" data-town="FRA, BER, HAM">
  Lorem ipsum
</div>
1 голос
/ 07 марта 2019

Попробуйте с Array#map и Array#filter

  1. Split down attr и вам нужно обрезать после разбиения, потому что у него есть дополнительное пространство
  2. Затем сопоставьте элемент с возвратомпозиция индекса> -1
  3. окончательно проверить длину истинного значения, а длина массива результата равна >= длина массива города 

function check() {
  var arr = $("#testdiv").data("town").split(",").map(a => a.trim())
  var res = $("input[type=checkbox]:checked").map(function() {
    return arr.indexOf($(this).attr('value')) > -1
  }).get();
  console.log(res)
  var l = res.filter(a => a == true).length
  console.log(l >= arr.length && res.length >= arr.length)
}

$('input').change(check)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<input type="checkbox" value="FRA" checked />
<input type="checkbox" value="BER" checked />
<input type="checkbox" value="HAM" />
<input type="checkbox" value="MUC" checked/>

<div id="testdiv" data-town="FRA, BER, HAM">
  Lorem ipsum
</div>
1 голос
/ 07 марта 2019

Вы можете собирать данные в виде массива, а затем сравнивать два отсортированных массива в виде строк.

Отредактированный ответ. Используя .includes(), мы можем проверить, является ли data-attribute частью строки, собранной из отмеченных флажков. 

const findIfMatch = () => {
  const data = document.querySelector('#testdiv').getAttribute('data-town').split(', ').sort()
  const checkboxes = document.querySelectorAll('.chb:checked')
  const values = Array.prototype.slice.call(checkboxes).map(chb => chb.value).sort()
  console.log(values.toString().includes(data.toString()))
}
Fra <input class='chb' type="checkbox" value="FRA" checked />
Ber <input class='chb' type="checkbox" value="BER" checked />
Ham <input class='chb' type="checkbox" value="HAM" />
Muc <input class='chb' type="checkbox" value="MUC" />

<div id="testdiv" data-town="FRA, BER, HAM">
  Lorem ipsum
</div>

<button onclick="findIfMatch()">Check</button>
1 голос
/ 07 марта 2019

Вам нужно сделать два изменения:

  1. Сначала начните с результата по умолчанию true, но установите для него значение false, если вы найдете флажок, значение которого присутствует в атрибуте data-town элемента div.

  2. Обратите внимание, что между значениями в FRA, BER, HAM есть пробелы. Поскольку вы не можете сравнить _BER (который получается, разбив строку) с BER (который является значением флажка), вам необходимо обрезать эти значения перед сравнением. Это можно сделать, добавив .map(t => t.trim()) при получении списка городов.

Вот рабочий фрагмент. 

var result = true;
var towns = $("#testdiv").data("town").split(",").map(t => t.trim());
$("input[type=checkbox]:checked").each(function() {
  if(towns.indexOf($(this).val()) == -1) {
    result = false;
  }
});

console.log(result);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<input type="checkbox" value="FRA" checked />
<input type="checkbox" value="BER" checked />
<input type="checkbox" value="HAM" checked />
<input type="checkbox" value="MUC" />

<div id="testdiv" data-town="FRA, BER, HAM">
  Lorem ipsum
</div>
1 голос
/ 07 марта 2019

Вы можете добавить цикл for, который проходит через все значения в data-town и проверяет, проверены ли они, вместо того, чтобы проходить через все флажки, которые отмечены. 

function testChecked() {
  let arr = $("#testdiv").data("town").split(",");
  
  for (let i = 0; i < arr.length; i++) {
    if (!$("input[value=" + arr[i] + "]").is(":checked")) return false;
  }
  
  return true;
}

console.log(testChecked());
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<input type="checkbox" value="FRA" checked />
<input type="checkbox" value="BER" checked />
<input type="checkbox" value="HAM" checked />
<input type="checkbox" value="MUC" />

<div id="testdiv" data-town="FRA,BER,HAM">
  Lorem ipsum
</div>
0 голосов
/ 07 марта 2019

Создайте массив обязательных значений, а затем используйте every() для проверки идентификатора, каждое обязательное значение принадлежит проверенному флажку: 

const list = $('#testdiv').attr('data-town').split(',').map(x => x.trim());
const result = list.every(x => $(`input[type="checkbox"][value="${x}"]`).is(':checked'));
console.log(result);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<input type="checkbox" value="FRA" checked />
<input type="checkbox" value="BER" checked />
<input type="checkbox" value="HAM" />
<input type="checkbox" value="MUC" />

<div id="testdiv" data-town="FRA, BER, HAM">
  Lorem ipsum
</div>
...