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

Question

我一直在寻找关于如何获取复选框组值的想法，但到目前为止我需要 x 和 y，我所看到的只有一个，所以我还没有真正找到任何相关的答案或想法问题所以我会解释我想要发生的事情。在我的 X 中，我有许多列，即 first quarter、second quester、third quarter 和 fourth quarter 在我的 Y 中，我有学生的姓名。我还有一个额外的复选框 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

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

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

checkbox group get value of checked checkbox jquery

html

javascript

checkbox

jquery