如何在JavaScript中通过循环获取多组复选框的选中值

原有代码问题说明 #

• 遍历DOM集合错误：document.getElementsByName返回的是类数组的NodeList对象，使用for...in遍历会拿到对象的所有可枚举属性而非DOM元素本身，无法正确访问checked、value属性
• 复选框未配置value属性：原有HTML的复选框没有定义value，直接读取value只能拿到默认空值
• 字符串拼接方法错误：append是DOM节点操作方法，不能用于字符串拼接，且初始变量未赋值会导致拼接异常
• 结果格式不符合预期：直接拼接字符串会在末尾多出多余的逗号，使用数组存储选中值再join更易控制格式

修复后代码 #

HTML（仅需给复选框补充value属性） #

<table>
    <tr>
        <th colspan="2">Part A</th>
        <th colspan="2">Part B</th>
    </tr>
    <tr>
        <td >
            <input class="checkbox" type="checkbox" id="chkbox_a1" name="PartA" value="a1"></td>
        <td  class="style6">A1</td>
        <td >
            <input  class="checkbox" type="checkbox" id="chkbox_b1" name="PartB" value="b1"></td>
        <td class="style6" >B1</td>
    </tr>
     <tr>
        <td >
            <input class="checkbox" type="checkbox" id="chkbox_a2" name="PartA" value="a2"></td>
        <td  class="style6">A2</td>
        <td >
            <input  class="checkbox" type="checkbox" id="chkbox_b2" name="PartB" value="b2"></td>
        <td class="style6" >B2</td>
    </tr>
     <tr>
        <td >
            <input class="checkbox" type="checkbox" id="chkbox_a3" name="PartA" value="a3"></td>
        <td  class="style6">A3</td>
        <td >
            <input  class="checkbox" type="checkbox" id="chkbox_b3" name="PartB" value="b3"></td>
        <td class="style6" >B3</td>
    </tr>
     <tr>
        <td >
            <input class="checkbox" type="checkbox" id="chkbox_a4" name="PartA" value="a4"></td>
        <td  class="style6">A4</td>
        <td >
            <input  class="checkbox" type="checkbox" id="chkbox_b4" name="PartB" value="b4"></td>
        <td class="style6" >B4</td>
    </tr>                
</table>

JavaScript #

function save() {
    // 初始化数组存储选中的选项值
    const partASelected = []
    const partBSelected = []

    // 处理Part A的复选框
    const partAChecks = document.getElementsByName('PartA')
    for (let i = 0; i < partAChecks.length; i++) {
        if (partAChecks[i].checked) {
            partASelected.push(partAChecks[i].value)
        }
    }

    // 处理Part B的复选框，用forEach写法更简洁
    const partBChecks = document.getElementsByName('PartB')
    partBChecks.forEach(checkItem => {
        if (checkItem.checked) {
            partBSelected.push(checkItem.value)
        }
    })

    // 转换为逗号分隔的字符串，符合需求格式
    const checkboxPartA = partASelected.join(',')
    const checkboxPartB = partBSelected.join(',')

    // 此处可替换为你的业务逻辑，示例为控制台输出
    console.log('PartA选中值：', checkboxPartA)
    console.log('PartB选中值：', checkboxPartB)
}

如果不想修改HTML补充value属性，也可以直接从复选框的id中提取值，将push部分的代码替换为partASelected.push(partAChecks[i].id.split('_')[1])即可实现相同效果。

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