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

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

您可以将存储在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 2

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

试试Array#map 和Array#filter

1. 拆分down attr，拆分后需要修剪，因为它有一些额外的空间
2. 然后映射返回索引位置> -1的元素
3. 最终验证真值长度和结果数组长度为>=town数组长度

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 4

您需要进行两项更改：

1. 首先，从true 的默认结果开始，但如果您发现选中的复选框的值存在于 div 的data-town 属性中，则将其设置为 false。

2. 请注意FRA, BER, HAM 中的值之间存在空格。由于您无法将_BER（通过拆分字符串获得）与BER（复选框的值）进行比较，因此您需要在比较之前修剪这些值。可以通过在获取城镇列表时附加.map(t => t.trim()) 来完成。

这是一个有效的 sn-p。

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 5

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

Array.prototype.every 检查指定条件 "$("input[type=checkbox][value=" + t +"]:checked") selector has length > 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>

Answer 6

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

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

创建一个强制值数组，然后使用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>