如何从HTML表格复选框获取1/0状态用于JS逻辑及MySQL存储

问题 #

我需要在JavaScript中从HTML表格里获取复选框的状态，用来带入编辑页面最终保存到MySQL数据库。点击编辑按钮时执行指定脚本，但目前通过var _$subCategoryDiscretionary = objCells.item(6).innerHTML;获取到的是完整的HTML复选框代码，没法用1/0、true/false或checked/unchecked这类格式做IF判断，试了多种方法都没成功，该怎么获取所需的复选框状态值？

当前使用的脚本代码：

function editsubcategory(element, value) {
    var _$index = (element.parentNode.parentNode.rowIndex)
    var myTab = document.getElementById('subcategorytable');
    var objCells = myTab.rows.item(element.parentNode.parentNode.rowIndex).cells;
    var _$subCategoryID = objCells.item(0).innerHTML; // categoryID
    var _$subCategoryName = objCells.item(1).innerHTML; // categoryName
    var _$subCategoryDescription = objCells.item(2).innerHTML; // categoryDescription
    var _$subCategoryMain = objCells.item(3).innerHTML; // subCategoryMain
    var _$subCategoryType = objCells.item(4).innerHTML; // subCategoryType
    var _$subCategoryBudget = objCells.item(5).innerHTML; // subCategoryType
    var _$subCategoryDiscretionary = objCells.item(6).innerHTML; // subCategoryType


    var _$btn = value; // button

    // alert(_$subCategoryID);
    // alert(_$subCategoryName);
    // alert(_$subCategoryDescription);
    // alert(_$subCategoryMain);
    // alert(_$subCategoryType);
    // alert(_$subCategoryBudget);
    // alert(_$subCategoryAccount);
    alert(_$subCategoryDiscretionary);
    // alert(_$btn);

    window.location.href = "edit-subcategory.php?subCategoryID=" + _$subCategoryID
+ "&btn=" + _$btn
+ "&subCategoryName=" + _$subCategoryName
+ "&subCategoryDescription=" + _$subCategoryDescription
+ "&subCategoryMain=" + _$subCategoryMain
+ "&subCategoryType=" + _$subCategoryType
+ "&subCategoryBudget=" + _$subCategoryBudget
+ "&subCategoryDiscretionary=" + _$subCategoryDiscretionary;

};

解决方案 #

核心是不要通过innerHTML获取HTML代码，而是直接获取复选框DOM元素的状态属性，具体操作如下：

关键修改步骤 #

1. 从目标单元格中定位到复选框元素：用querySelector直接在单元格内查找input[type="checkbox"]
2. 判断复选框是否存在，再获取它的checked属性（布尔值）
3. 将布尔值转换成你需要的格式（比如1/0或者true/false）

格式转换示例 #

• 若需要1/0格式：

var checkbox = objCells.item(6).querySelector('input[type="checkbox"]');
var _$subCategoryDiscretionary = checkbox ? (checkbox.checked ? 1 : 0) : 0;

• 若需要true/false字符串格式：

var checkbox = objCells.item(6).querySelector('input[type="checkbox"]');
var _$subCategoryDiscretionary = checkbox ? checkbox.checked.toString() : "false";

完整修改后的脚本 #

function editsubcategory(element, value) {
    var _$index = (element.parentNode.parentNode.rowIndex)
    var myTab = document.getElementById('subcategorytable');
    var objCells = myTab.rows.item(element.parentNode.parentNode.rowIndex).cells;
    var _$subCategoryID = objCells.item(0).innerHTML; // categoryID
    var _$subCategoryName = objCells.item(1).innerHTML; // categoryName
    var _$subCategoryDescription = objCells.item(2).innerHTML; // categoryDescription
    var _$subCategoryMain = objCells.item(3).innerHTML; // subCategoryMain
    var _$subCategoryType = objCells.item(4).innerHTML; // subCategoryType
    var _$subCategoryBudget = objCells.item(5).innerHTML; // subCategoryType
    
    // 获取复选框状态的修改部分
    var checkbox = objCells.item(6).querySelector('input[type="checkbox"]');
    var _$subCategoryDiscretionary = checkbox ? (checkbox.checked ? 1 : 0) : 0;

    var _$btn = value; // button

    // 可以用alert测试获取到的状态值
    alert(_$subCategoryDiscretionary);

    window.location.href = "edit-subcategory.php?subCategoryID=" + _$subCategoryID
+ "&btn=" + _$btn
+ "&subCategoryName=" + _$subCategoryName
+ "&subCategoryDescription=" + _$subCategoryDescription
+ "&subCategoryMain=" + _$subCategoryMain
+ "&subCategoryType=" + _$subCategoryType
+ "&subCategoryBudget=" + _$subCategoryBudget
+ "&subCategoryDiscretionary=" + _$subCategoryDiscretionary;
};

额外提示 #

如果表格里的复选框有特定的id或class，可以把querySelector的参数改成更精准的选择器（比如#discretionary-checkbox），避免单元格内有多个复选框时出错。

内容的提问来源于stack exchange，提问作者newtowebapp