检查所选复选框的值是否在data-attribute中

问题描述 投票：0回答：7

我需要找出所选复选框的值是否可以在给定div的data-attribute中找到。

仅当选中了具有在data-attribute中找到的值的所有复选框时，结果才应为TRUE。如果取消选中在data-attribute中找到值的一个或多个复选框，则结果应为FALSE。

例子：

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

选中的复选框：FRA，BER =>结果：false

选中的复选框：BER，HAM，MUC =>结果：false

选中的复选框：FROM，BER，HAM =>结果：true

选中的复选框：FROM，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>

目前我只知道一个复选框值的结果。但是如果缺少data-attribute中提到的其中一个城镇，我需要得到一个假结果。

javascript jquery checkbox checked
7个回答
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>
2
投票

您可以将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>

where ${val} does come from

:
I am using Array.prototype.every() and it takes a callback function. The first argument refers the element of the array. Which is val in this case. See Array.prototype.every()
1
投票

尝试使用Array#map和Array#filter

  1. 拆分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
投票

您需要进行两项更改：

  1. 首先，从true的默认结果开始，但是如果找到一个复选的复选框，其值在div的data-town属性中，则将其设置为false。
  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
投票

下面的工作示例，迭代正好相反：我们迭代每个data-town属性的城镇（注意修剪）。

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>
1
投票

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

编辑回答。使用.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>
0
投票

创建一个强制值数组，然后使用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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.