Jquery getting the correct value based on checkbox checked

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?

Bharath · Accepted Answer · 2014-06-23 05:17:00Z

4

Try this

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

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

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

answered Jun 23, 2014 at 5:17

Bharath

5294 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Gadgetster Over a year ago

using 'this' in my actual code get's undefined even though the set up is the same as the one I posted

Bharath Over a year ago

FIDDLE i have did the same thing. it seems to be working fine for me

Rajaprabhu Aravindasamy · Accepted Answer · 2014-06-23 05:14:40Z

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

answered Jun 23, 2014 at 5:14

Rajaprabhu Aravindasamy

67.2k17 gold badges107 silver badges133 bronze badges

3 Comments

Rajaprabhu Aravindasamy Over a year ago

@Downvote: Can you please specify the reason for your vote..? so that i could fix the mistakes that i made..

Balachandran Over a year ago

@sudharsan .it s comedy dont take any serious .just fun

Sudharsan S Over a year ago

@RajaprabhuAravindasamy and bala please delete all comment which you are posted

Ehsan Sajjad · Accepted Answer · 2014-06-23 05:20:03Z

2

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

answered Jun 23, 2014 at 5:20

Ehsan Sajjad

62.6k16 gold badges113 silver badges171 bronze badges

Comments

Shaunak D · Accepted Answer · 2014-06-23 05:35:41Z

2

Demo

Missing paranthesis last line - change function.
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
});

edited Jun 23, 2014 at 5:35

answered Jun 23, 2014 at 5:15

Shaunak D

20.7k10 gold badges48 silver badges79 bronze badges

2 Comments

Gadgetster Over a year ago

1. my mistake copying. 2. this gets me undefined value for my actual code which is similar set up

Shaunak D Over a year ago

@Gadgetster, have you included jQuery reference?

Yannick Y · Accepted Answer · 2014-06-23 05:17:37Z

1

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);
     }
}

answered Jun 23, 2014 at 5:17

Yannick Y

2,8561 gold badge18 silver badges22 bronze badges

3 Comments

Yannick Y Over a year ago

I don't understand why people unecessarily try to downvote for no reason. I'm trying to contribute too.

Sudharsan S Over a year ago

it is wrong man - $(this).attr('data-section_list'); but i didn't put downvote for you thanks

Yannick Y Over a year ago

why is that, is the attr (api.jquery.com/attr) depreciated? I know the data function is used to pass info that is not necessarily set as an attribute

Mr7-itsurdeveloper · Accepted Answer · 2014-06-23 05:21:23Z

1

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/

answered Jun 23, 2014 at 5:21

Mr7-itsurdeveloper

1,6412 gold badges17 silver badges24 bronze badges

Comments

DWX · Accepted Answer · 2014-06-23 05:27:06Z

1

Try this:-

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

edited Jun 23, 2014 at 5:27

answered Jun 23, 2014 at 5:21

DWX

2,3401 gold badge16 silver badges15 bronze badges

Collectives™ on Stack Overflow

Jquery getting the correct value based on checkbox checked

7 Answers 7

2 Comments

DEMO

3 Comments

Comments

2 Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

2 Comments

3 Comments

Comments

2 Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related