使用jQuery通过自定义数据属性的子字符串选择复选框

How can i select checkbox which contains number in range of numbers (numbers are not repeated) in data attribute. Lets say i have these two checkboxes:

如何在数据属性中选择包含数字范围（数字不重复）的数字的复选框。假设我有这两个复选框：

<input type="checkbox" name="A" data-numbers="1,3,2" />
<input type="checkbox" name="B" data-numbers="34,21,11,39,8,6,33" />

and i want to select checkbox by number 3.

我想选择3号复选框。

Because number 3 is second number in first checkbox data-numbers, it should match and select first checkbox.

因为数字3是第一个复选框数据编号中的第二个数字，所以它应匹配并选择第一个复选框。

3 个解决方案

#1

You can filter the jQuery objects.

您可以过滤jQuery对象。

var num = "3";
var elem = $('[date-numbers]').filter(function(){
   return $(this).data("numbers").split(",").indexOf(num) > -1;
});

What you're doing is filtering based on splitting on , and then checking if the num is present in it.

您正在做的是基于拆分进行过滤，然后检查其中是否存在num。

#2

This answer uses the same technique as @AmitJoki's but transfers some processing to the markup, if you're open to suggestions. By changing "1,3,2" to "[1,3,2]" ....., the code becomes:

这个答案使用与@ AmitJoki相同的技术，但如果你愿意接受建议，可以将一些处理转移到标记。通过将“1,3,2”更改为“[1,3,2]”.....，代码变为：

var num = 3;
$(':checkbox').filter(function() {
    return $(this).data('numbers').indexOf( num ) > -1;
})
.prop('checked', true); //or whatever other processing you'd like to perform

$(function() {
    //not required .. just for demo purposes
    $(':checkbox').after(function() {
        return $('<label/>', {text: $(this).data('numbers')});
    });

    var num = 3;
    $(':checkbox').filter(function() {
        return $(this).data('numbers').indexOf( num ) > -1;
    })
    .prop('checked', true); //or whatever other processing you'd like to perform
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" name="A" data-numbers="[1,3,2]" />
<input type="checkbox" name="B" data-numbers="[34,21,11,39,8,6,33]" />

#3

Loop through all inputs with 'data-numbers' set the attr checked if the index of your value to located is found

使用'data-numbers'循环遍历所有输入，设置attr检查是否找到了您要定位的值的索引

$("input[data-numbers]").each(function() {
    $(this).attr("checked", $(this).attr('data-numbers').indexOf(",3,") > -1);
});

http://jsfiddle.net/Mutmatt/jfzpakru/

#1