JavaScript 检测哪些复选框并选中并执行操作答案

【问题标题】：JavaScript to detect what checkboxes and checked and perform actionJavaScript 检测哪些复选框并选中并执行操作
【发布时间】：2018-04-30 03:25:35
【问题描述】：

我有一个带有这样声明的复选框的 jsp 页面

<form:checkbox path="affProgramSessionList[${status.index}].programSessionDetailId" id="checkbox_${session.id}" data-id="${session.id}" value="${session.id}" />

它包含在一个 for 循环中，基本上每个会话都会显示一个复选框。一切正常，我没有问题。

当前当一个复选框被选中时，这个函数就会运行

$("input[id*='checkbox_']").each(function () {
    $(this).click(function(){
        var dataid = $(this).attr("data-id");
        var divId = "fullAttendence_" + dataid;
        var divIdAttendee = "attendeeType_" + dataid;

        $('#' + divId).toggle(this.checked);
        $('#' + divIdAttendee).toggle(this.checked);
    });

});

这会导致其他一些复选框被选中并显示一些隐藏的 div。

我现在正在添加功能，如果有人选中了一些复选框并保存并返回页面，那么这些复选框将被选中。

我有那部分工作，但我无法让该功能正常运行。

我有以下

if ($("input[id*='checkbox_']").is(':checked')) {

    var dataid = $(this).attr("data-id");
    var divId = "fullAttendence_" + dataid;
    var divIdAttendee = "attendeeType_" + dataid;

    $('#' + divId).toggle(this.checked);
    $('#' + divIdAttendee).toggle(this.checked);
}

这个函数在我用 console.log 测试时会被调用。

问题是

var dataid = $(this).attr("data-id");

回来

undefined

现在我的假设只是我检查复选框的新函数和另一个被调用的函数的工作方式不太一样，而且我的函数不知道选中了哪个复选框，至少有一个是?

非常感谢任何帮助。

【问题讨论】：

在使用jQuery时，不要通过attr('data-id')访问Datastore，而是使用.data('id')获取和设置值。就像“最佳实践”建议一样。
如果进行了更改，'data-id="${session.id}"' 仍然会被放入复选框减速中还是会以不同的方式进行？
在标记方面，你可以并且仍然应该使用data-foo="bar"，只是通过jQuery访问和更改它应该分别成为$(elem).data('foo'); // returns 'bar'和$(elem).data('foo', 'quuuux'); // is now 'quuuux'
太棒了，谢谢你的提示:)

标签： javascript html jsp checkbox

【解决方案1】：

if ($("input[id*='checkbox_']").is(':checked')) {

... 将过滤掉第一个检查的输入并对其进行操作。如果要迭代所有复选框，请使用以下构造：

$("input[id*='checkbox_']").each(function() {
    if ($(this).is(':checked')) {
        // do something
    }
});

【讨论】：