Jquery根据选中的复选框获取正确的值答案

【问题标题】：Jquery getting the correct value based on checkbox checkedJquery根据选中的复选框获取正确的值
【发布时间】：2014-08-13 01:39:32
【问题描述】：

我无法让这个简单的代码工作。我想从 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">

如何让alert显示data-section_list的对应值？

【问题讨论】：

标签： javascript jquery checkbox

【解决方案1】：

在从当前元素获取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

【讨论】：

@Downvote：您能具体说明您投票的原因吗？这样我就可以纠正我犯的错误..
@sudharsan 。这是喜剧，不严肃。只是好玩
@RajaprabhuAravindasamy 和 bala 请删除您发布的所有评论

【解决方案2】：

Demo

缺少最后一行的括号 - change 函数。
也可以使用$(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
});

【讨论】：

1.我的错误复制。 2. 这为我的实际代码提供了未定义的值，类似于设置
@Gadgetster，你是否包含了 jQuery 参考？

【解决方案3】：

试试这个

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

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

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

【讨论】：

在我的实际代码中使用“this”得到未定义，即使设置与我发布的相同
FIDDLE 我也做过同样的事情。它似乎对我来说工作正常

【解决方案4】：

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

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

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

【讨论】：

我不明白为什么人们会无缘无故地试图投反对票。我也在努力做出贡献。
这是错误的人 - $(this).attr('data-section_list');但我没有为你投反对票，谢谢
为什么，attr (api.jquery.com/attr) 折旧了？我知道数据函数用于传递不一定设置为属性的信息

【解决方案5】：

您需要使用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);
     }
});

UPDATED FIDDLE

【讨论】：

【解决方案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/

【讨论】：

【解决方案7】：

试试这个：-

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

【讨论】：