檢查所選復選框的值是否在數據屬性中

Question

我需要找出是否可以在給定div的數據屬性中找到所選復選框的值。

僅當選中所有具有在數據屬性中找到的值的復選框時，結果才應為TRUE。 如果未選中在數據屬性中找到值的一個或多個復選框，則結果應為FALSE。

例子：

<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> 

目前，我只知道一個復選框值的結果。 但是，如果缺少數據屬性中顯示的城鎮之一，我需要得出一個假的結果。

Answer 1

您可以獲取存儲在data-town所有值作為數組。 然后循環通過該數組。 如果使用every() checked ，則checked輸入是否具有該值。 你應該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

您需要進行兩項更改：

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> 

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

1. 拆分attr，拆分down需要修剪，因為它有一些額外的空間
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> 

Answer 6

在下面的工作示例中，迭代是相反的：我們迭代每個data-town屬性的鎮（請注意修剪）。

Array.prototype.every檢查dataTown中的每個項目的指定條件“ $（“ input [type = checkbox] [value =” + t +“]：checked”）選擇器的長度> 0”是否為true。

如果是這樣，我們將記錄為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> 

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>