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

时间:2014-06-23 05:12:10

标签: javascript jquery checkbox

我无法使用这个简单的代码。我想从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的相应值?

7 个答案:

答案 0 :(得分:4)

试试这个

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

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

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

答案 1 :(得分:2)

从当前元素中提取$(this)时尝试使用data引用,

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

答案 2 :(得分:2)

<强> Demo

  1. 缺少括号最后一行 - change功能。
  2. 还可以使用$(this)获取数据。

  3. $(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
    });
    

答案 3 :(得分:2)

您需要使用当前使用this的{​​{1}}来获取当前点击的元素数据属性,这将无法提供所需的输出,因为页面上有多个元素与此类:

变化:

$(".section")

为:

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

您的代码如下:

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

UPDATED FIDDLE

答案 4 :(得分:1)

您需要获取要点击的元素的属性

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

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

答案 5 :(得分:1)

试试这个: 改变函数后使用此代替.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/

答案 6 :(得分:1)

试试这个: -

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