使用 jQuery 获取复选框属性

Question

例如我有几个复选框。

<input type="checkbox" value="27" name="option_value[12][]" id="option_value_27"  class="filtered option_value" cat="121">
<input type="checkbox" value="27" name="option_value[12][]" id="option_value_27"  class="filtered option_value" cat="141">

两个问题：

1. cat属性的声明是否有效？
2. 例如，当我单击按钮时，如何访问cat 属性值？

Answer 1

不，cat 不是有效属性，您可以使用 HTML5 data-* 属性和 jQuery data 方法：

<input type="checkbox" value="27" name="option_value[12][]" id="option_value_27"  class="filtered option_value" data-cat="121">

$('#button').click(function(){
    var cat = $('#option_value_27').data('cat');
})

或者attr方法：

var cat = $('#option_value_27').attr('data-cat');

或者如果你不使用jQuery，你也可以使用dataset属性：

var cat = document.getElementById('option_value_27').dataset.cat;

另请注意，ID 必须是唯一的。如果要获取所有cat属性的值，可以使用map方法：

var cats = $('.filtered').map(function(){
    return this.dataset.cat
    // or $(this).attr('data-cat')
}).get()
// console.log(cats)

现在cats 是一个包含data-cat 属性的所有值的数组。