javascript - 复选框组获取选中复选框的值jquery

Question

我一直在寻找如何获取复选框组值的想法，但我需要 x 和 y，到目前为止我所看到的只有一个，所以我还没有真正找到任何相关的答案或想法来解决我的问题，所以我会解释我想要发生的事情。在我的 X 中，我有许多列，即第一季度、第二个探索者、第三季度和第四季度我的 Y 我有学生的名字。我还有一个额外的复选框选项来添加其他学生。我想检查与姓名和季度相对应的支票。我将用它来追踪已经参加考试和尚未参加考试的学生。我想知道如何对复选框进行分组，以便当我选中它时会自动获取学生姓名和相应季度。

HTML:

<tr>
    <td width="25%">
        <hr/>
    </td>
    <td width="15%">
        <center><span>1st Quarter</span>
        </center>
    </td>
    <td width="15%">
        <center><span>2nd Quarter</span>
        </center>
    </td>
    <td width="15%">
        <center><span>3rd Quarter</span>
        </center>
    </td>
    <td width="20%">
        <center><span>4th Quarter</span>
        </center>
    </td>
</tr>
<tr>
    <td><span>Joe Smith</span>
    </td>
    <td>
        <center>
            <input type="checkbox" name="studentrecord[]" />
        </center>
    </td>
    <td>
        <center>
            <input type="checkbox" name="studentrecord[]" />
        </center>
    </td>
    <td>
        <center>
            <input type="checkbox" name="studentrecord[]" />
        </center>
    </td>
    <td>
        <center>
            <input type="checkbox" name="studentrecord[]" />
        </center>
    </td>
</tr>
<tr>
    <td><span>John Smith</span>
    </td>
    <td>
        <center>
            <input type="checkbox" name="studentrecord[]" />
        </center>
    </td>
    <td>
        <center>
            <input type="checkbox" name="studentrecord[]" />
        </center>
    </td>
    <td>
        <center>
            <input type="checkbox" name="studentrecord[]" />
        </center>
    </td>
    <td>
        <center>
            <input type="checkbox" name="studentrecord[]" />
        </center>
    </td>
</tr>

检查fiddle

更新

$("input[name='student[]']:checked").map(function() {
    var $td = $(this).closest('td'),
        index = $td.index();
    valueToPush.push({
        Quarter: quarter.eq($td.index()).find('span').text().trim(),
        Student: $td.parent().find('td:first-child span').text().trim()
    });
});

Answer 1

在这种情况下，一种方法是创建一个对象数组，其中每个对象代表一个复选框，例如

$(document).on('click', '#check', function() {    
    var $quarters = $('table tr:first-child td');
    var values = $("input[name='studentrecord[]']:checked").map(function(){
        var $td  = $(this).closest('td'), index = $td.index();
        return {
            quarter: $quarters.eq($td.index()).find('span').text().trim(),
            student: $td.parent().find('td:first-child span').text().trim()
        }
    }).get();
    console.log(values);
});

演示:Fiddle

注意:如果执行脚本 $(document).on('click', '#check', function() { }) 时存在按钮，则无需使用事件委托(delegate)。

<小时/>

另一种选择是针对每个学生存储一系列宿舍，例如

$('#check').on('click', function () {
    var $quaters = $('table tr:first-child td'),
        students = {};
    $("input[name='studentrecord[]']:checked").each(function () {
        var $td = $(this).closest('td'),
            student = $td.parent().find('td:first-child span').text().trim();
        if (!students[student]) {
            students[student] = [];
        }
        students[student].push($quaters.eq($td.index()).find('span').text().trim())
    }).get();
    console.log(students);
});

演示:Fiddle