检查所选复选框的值是否在数据属性中

Question

我需要查明是否可以在给定 div 的数据属性中找到所选复选框的值。

只有选中所有具有在数据属性中找到的值的复选框，结果才应为 TRUE。如果未选中一个或多个具有在数据属性中找到的值的复选框，则结果应为 FALSE。

示例：

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

选中的复选框：FRA、BER => 结果：错误

选中的复选框：BER、HAM、MUC => 结果：错误

选中的复选框：FRA、BER、HAM => 结果：真

选中的复选框：FRA、BER、HAM、MUC => 结果：真

$("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 的结果。

Answer 1

您可以添加一个 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>

Answer 2

您需要进行两项更改：

首先，从默认结果 true 开始，但如果您发现一个选中的复选框其值存在于 [= 的 data-town 属性中，则将其设置为假38=].
请注意 FRA, BER, HAM 中的值之间有空格。由于您无法将 _BER（通过拆分字符串获得）与 BER（复选框的值）进行比较，因此在比较之前需要 trim 这些值。可以通过在获取城镇列表时附加 .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>

Answer 3

您可以获取存储在 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()

Answer 4

您可以将数据收集为数组，然后将两个排序的数组作为字符串进行比较。

已编辑答案。使用 .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>

Answer 5

试试 Array#map 和 Array#filter

拆分 down 属性，拆分后你需要 trim 因为它有一些额外的 space
然后映射 return 索引位置 > -1
最终验证真值长度和结果数组长度为>=镇数组长度

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>

Answer 6

创建一个强制值数组，然后使用 every() 检查 id 每个强制值都属于选中的复选框：

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>

Answer 7

下面的工作示例，迭代只是相反：我们迭代每个数据城镇属性的城镇（注意 trim）。

Array.prototype.every 检查指定条件 "$("input[type=checkbox][value=" + t +"]:checked") 选择器的长度 > 0" 对于 dataTown 中的每个项目是否为真。

如果是这样，我们记录为真。

更改复选框状态时发生日志记录。

$('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>

检查所选复选框的值是否在数据属性中

Check if value of selected checkboxes are in data-attribute

javascript

jquery

checkbox

checked

`${val}` 的来源

检查所选复选框的值是否在数据属性中

Check if value of selected checkboxes are in data-attribute

javascript

jquery

checkbox

checked

${val} 的来源

`${val}` 的来源