Question

我一直在寻找如何获得复选框组的价值的想法，但我需要x和y这个到目前为止我所看到的只有一个所以我还没有真正找到任何相关的答案或想法，所以我的问题所以我将解释我想要发生的事情。在我的X中，我有许多列，first quarter，second quester，third quarter和fourth quarter，我的学生名称。我还有一个额外的复选框option to add additional student。我想检查名称和季度对应的支票。我会用它来追踪参加考试的学生和尚未参加考试的学生。我想知道如何对复选框进行分组，当我检查它时会自动获取student name和corresponding quarter。

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

Update

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

在这种情况下，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() { })时按钮存在，则无需使用事件委派。

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

$('#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

Answer 2

您最初可以跟踪每个复选框，然后将它们存储在一个数组中。稍后，在单击按钮的同时，您可以直接检索学生姓名和他们出现的宿舍。请检查此Fiddle

var arrObj = {};

$("input[type='checkbox']").click(function(){
    if($(this).is(':checked')) {
        var studentName = $(this).closest('tr').find('td:first span').html();
        var quarterIndex = $(this).closest('td').index();
        var quarterName = $(this).closest('table').find('tr:first td:eq('+parseInt(quarterIndex)+')').find('span').html();
        if(arrObj[studentName]) {
            arrObj[studentName].push(quarterName);
        } else {
            arrObj[studentName] = [];
            arrObj[studentName].push(quarterName);
        }
    }
});

$(document).on('click', '#check', function() {

    for( var key in arrObj) {
        alert(key+" appeard in: "+arrObj[key]);
    }
});

复选框组获取已选中复选框jquery的值

2 个答案: