Jquery根據復選框選中正確的值

Question

我無法讓這個簡單的代碼工作。 我想從data屬性中獲取值，並根據它將其傳遞給警報

http://jsfiddle.net/btL9C/

$("input[type=checkbox]").change(function() {
     var section_list = $('.section').data('section_list');

     if ($(this).hasClass(section_list+"_list")) {          
         alert(section_list);
     }
});

HTML：

<input type="checkbox" data-section_list = "1" class="section 1_list">
<input type="checkbox" data-section_list = "2" class="section 2_list">
<input type="checkbox" data-section_list = "3" class="section 3_list">

如何獲取警報以顯示data-section_list的相應值？

Answer 1

嘗試這個

$("input[type=checkbox]").change(function() {

    var section_list = $(this).data().section_list;

   if ($(this).hasClass(section_list+"_list")) {          
        alert(section_list);
   }
});

Answer 2

嘗試從當前元素獲取data時使用$(this)引用，

$("input[type=checkbox]").change(function () {
    var section_list = $(this).data('section_list');
    if ($(this).hasClass(section_list + "_list")) {
        alert(section_list);
    }
}); //-- You have missed to mention the close parenthesis here.

DEMO

Answer 3

演示

1. 缺少paranthesis最后一行 - change功能。
2. 還可以使用$(this)來獲取數據。

---

$(document).ready(function(){
    $("input[type=checkbox]").change(function() {
         var section_list = $(this).data('section_list');

         if ($(this).hasClass(section_list+"_list")) {          
             alert(section_list);
         }
    });  // <-- Missing
});

Answer 4

您需要通過使用來獲取當前點擊的元素數據屬性， this你目前正在使用越來越$(".section")這將不會給所需的輸出，因為有頁面上的多個元素使用這個類：

更改：

var section_list = $(".section").data('section_list');

至：

var section_list = $(this).data('section_list'); //<--- gets current cliked element data attribute

您的代碼將如下所示：

$("input:checkbox").change(function() {
     var section_list = $(this).data('section_list');

     if ($(this).hasClass(section_list+"_list")) {          
         alert(section_list);
     }
});

更新后的

Answer 5

您需要獲取要單擊的元素的屬性

$("input[type=checkbox]").change(function() {
     var section_list = $(this).attr('data-section_list');

     if ($(this).hasClass(section_list+"_list")) {          
         alert(section_list);
     }
}

Answer 6

試試這個：在改變功能之后使用它代替.section

<script type="text/javascript">
$(document).ready(function() {

$("input[type=checkbox]").change(function() {
     var section_list = $(this).data('section_list');

     if ($(this).hasClass(section_list+"_list")) {          
         alert(section_list);  
     }
});  
});  
</script> 

http://jsfiddle.net/btL9C/3/

Answer 7

嘗試這個：-

$("input[type=checkbox]").click( function(){
   if( $(this).is(':checked') ) alert($(this).attr("data-section_list"));
});