如何使用javascript获取复选框的选中属性

Question

我正在关注这个关于内联编辑的教程，http://www.datatables.net/blog/Inline_editing。

现在我遇到了问题，我正在尝试编辑复选框，但我没有到达那里。

我只是用复选框替换了文本类型的输入，但我想还有更多。所以我的问题是，如何读取复选框的选中属性？

这是我的代码

<script type="text/javascript">

    function restoreRow(oTable, nRow) {
        var aData = oTable.fnGetData(nRow);
        var jqTds = $('>td', nRow);

        for (var i = 0, iLen = jqTds.length; i < iLen; i++) {
            oTable.fnUpdate(aData[i], nRow, i, false);
        }

        oTable.fnDraw();
    }

    function editRow(oTable, nRow) {
        var aData = oTable.fnGetData(nRow);
        var jqTds = $('>td', nRow);
        jqTds[0].innerHTML = '<input type="text" value="' + aData[0] + '">';
        jqTds[1].innerHTML = '<input type="text" value="' + aData[1] + '">';
        jqTds[2].innerHTML = '<input type="checkbox" value="' + aData[2] + '">';
        jqTds[3].innerHTML = '<a class="edit" href="">Save</a>';

    }

    function saveRow(oTable, nRow) {
        var jqInputs = $('input', nRow);
        oTable.fnUpdate(jqInputs[0].value, nRow, 0, false);
        oTable.fnUpdate(jqInputs[1].value, nRow, 1, false);
        oTable.fnUpdate('<input type="checkbox" checked="' + jqInputs[2].value + '">', nRow, 2, false);
        oTable.fnUpdate('<a class="edit" href="">Edit</a>', nRow, 3, false);
        oTable.fnDraw();
    }

    $(document).ready(function () {
        var oTable = $('#tbl').dataTable();
        var nEditing = null;

        $('#new').click(function (e) {
            e.preventDefault();

            var aiNew = oTable.fnAddData(['', '', '',
            '<a class="edit" href="">Edit</a>', '<a class="delete" href="">Delete</a>']);
            var nRow = oTable.fnGetNodes(aiNew[0]);
            editRow(oTable, nRow);
            nEditing = nRow;
        });

        $('#tbl a.delete').live('click', function (e) {
            e.preventDefault();

            var nRow = $(this).parents('tr')[0];
            oTable.fnDeleteRow(nRow);
        });

        $('#tbl a.edit').live('click', function (e) {
            e.preventDefault();

            /* Get the row as a parent of the link that was clicked on */
            var nRow = $(this).parents('tr')[0];

            if (nEditing !== null && nEditing != nRow) {
                /* Currently editing - but not this row - restore the old before continuing to edit mode */
                restoreRow(oTable, nEditing);
                editRow(oTable, nRow);
                nEditing = nRow;
            }
            else if (nEditing == nRow && this.innerHTML == "Save") {
                /* Editing this row and want to save it */
                saveRow(oTable, nEditing);
                nEditing = null;
            }
            else {
                /* No edit in progress - let's start one */
                editRow(oTable, nRow);
                nEditing = nRow;
            }
        });
    });

这是我的桌子

<p>
                    <a id="new" href="">Add new row</a></p>
                <table cellpadding="0" cellspacing="0" border="0" class="tbl" id="tbl">
                    <thead>
                        <tr>
                            <th>
                                Name
                            </th>
                            <th>
                                Description
                            </th>
                            <th>
                                Sample
                            </th>
                            <th>
                            </th>
                            <th>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        @if (Model != null)
                        {
                            foreach (var item in Model.TestFields)
                            { 
                            <tr>
                                <td>
                                    @Truncate(item.Name, 20)
                                </td>
                                <td>
                                    @Truncate(item.Description, 20)
                                </td>
                                <td>
                                    @Html.CheckBoxFor(i => item.Sample)
                                </td>
                                <td>
                                    <a class="edit" href="">Edit</a>
                                </td>
                                <td>
                                    <a class="delete" href="">Delete</a>
                                </td>
                            </tr>
                            }
                        }
                    </tbody>
                </table>

Answer 1

这应该可以解决许多选中复选框的问题

// #BoxWrapper is supposed to be the div that contains the checkbox this could be replaced            
// by $(document) if you are not using a div as a container. 
$("#BoxWrapper").find('input:checkbox').each(function(){
var checked = $(this).attr('checked');
if(checked){
 //here you do what needs to be done for checked ones
}
});

Answer 2

假设您的 $ 符号是 jQuery，您可以这样做：

$('#my_checkbox').is(':checked') // true if my_checkbox is checked, false otherwise.