使用jQuery获取checkbox属性

时间:2012-11-18 13:52:50

标签: jquery html checkbox

例如,我有几个复选框。

<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属性值?

1 个答案:

答案 0 :(得分:8)

不,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)

现在catsdata-cat属性的所有值的数组。