Javascript 如何连接和缩进选中项取决于jquery中的名称/ID？

我在文本区域填充一组值，如果选中复选框名称为类别，它将输出一个换行，如果复选框名称为产品，则缩进。如果未选中父产品或类别，则删除详细信息

$（文档）.ready（函数（）{
var elems=$（'input:checkbox'）；
关于（'change'，function（）的元素{
$（“#列表”）.val(
elems.filter（':checked'）.map（函数（）{
返回此.value；
}).get（）.join（“\n\t”）
);
});
});

类别
名称
细节
第一类
产品名称A
产品详情A-1
产品名称B
产品详图B-1
产品详图B-2
第2类
产品名称A
产品详情A-1
产品名称B
产品详图B-1
产品详图B-2
试试这个：

$(document).ready(function() {
    var elem = $('input:checkbox');

    elem.on('change', function() {
        $('#list').val(
            elem.filter(':checked').map(function() {
                if(this.name == 'product') {
                    return "\t" + this.value
                }
                if(this.name == 'detail') {
                    return "\t\t" + this.value
                }
                return this.value;
            }).get().join("\n")
        );
    });
});

我测试了它，它似乎有效；）

为了能够检查是否选中了父元素，您需要在输入中包含有关父元素的信息：例如，使用数据父属性，因此您将具有：
html

当它是产品时我们检查父类别，当它是详细信息时我们检查产品和类别

最后一个替换是为了防止出现空行。
在html中，复选框productName A和product B在后面，然后您就有了详细信息，那么如何知道详细信息A-1是针对product A的，而详细信息A-2和A-2.1是针对product B的？您好，先生。。我已经编辑了html代码。谢谢你指出：）哇！它就像一个符咒！谢谢，先生！现在我的问题是，如果父产品或类别不存在，则删除详细信息checked@mrrsb欢迎：）我刚刚编辑了我的答案来解决家长的问题！接受答案！荣誉先生B.赞许你的男人！：）
<tr>
        <td rowspan="3">
            <label><input type="checkbox" value="Category 1" name="category" /> Category 1</label>
        </td>
        <td>
            <label><input type="checkbox" value="ProductName A" name="product" data-parent="Category 1"/> ProductName A</label>
        </td>
        <td>
            <label><input type="checkbox" value="ProductDetail A-1" name="detail" data-parent="ProductName A" /> ProductDetail A-1</label>
        </td>
    </tr>
    <tr>
        <td rowspan="2">
            <label><input type="checkbox" value="ProductName B" name="product"  data-parent="Category 1"/> ProductName B</label>
        </td>
        <td>
            <label><input type="checkbox" value="ProductDetail B-1" name="detail"  data-parent="ProductName B"/> ProductDetail B-1</label>
        </td>
    </tr>
    <tr>
        <td>
            <label><input type="checkbox" value="ProductDetail B-2" name="detail"  data-parent="ProductName B"/> ProductDetail B-2</label>
        </td>
    </tr> 

    function checkParent(type, value) {
        return $('input:checkbox[name="' + type + '"][value="' + value + '"]:checked').length;
    }

    $(document).ready(function() {
        var elem = $('input:checkbox');
        var parent;

        elem.on('change', function() {
            $('#list').val(
                elem.filter(':checked').map(function() {
                    if(this.name == 'product') {
                        // check for parent category
                        parent = $(this).data('parent');
                        if(checkParent("category", parent)) {
                            return "\t" + this.value;
                        } else {
                            return '';
                        }
                    }
                    if(this.name == 'detail') {
                        parent = $(this).data('parent');
                        category = $('input:checkbox[name="product"][value="' + parent + '"]').data('parent');
                        if(checkParent("product", parent) && checkParent("category", category)) {
                            return "\t\t" + this.value;
                        } else {
                            return '';
                        }
                    }
                    return this.value;
                }).get().join("\n").replace("\n\n", "\n")
            );
        });
    });