Jquery根据复选框选中正确的值

Question

I cannot get this simple code to work. I want to get the value from the data attribute and based on that pass it to the alert

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

How can I get the alert to display the corresponding value of data-section_list?

Answer 1

Try this

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

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

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

Answer 2

Try to use $(this) reference while fetching the data from the current element,

$("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

Demo

1. Missing paranthesis last line - change function.
2. Also use $(this) to get data.

---

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

you need to get current clicked element data attribute by using this currently you are getting using $(".section") which will not give desired output as there are multiple elements on page with this class:

change:

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

to:

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

Your code will look like:

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

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

UPDATED FIDDLE

Answer 5

You need to get the attribute of the element you are clicking on

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

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

Answer 6

Try this: use this instead .section after change function

<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

Try this:-

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