javascript - 如何加入和缩进选中的项目取决于 jquery 中的名称/ID？

Question

我在 textarea 中填充一组值，如果复选框名称是 category 被选中，它将输出一个换行符，然后如果复选框名称是 product 则缩进。如果未选中父产品或类别，则删除详细信息。

$(document).ready(function() {
	var elems = $('input:checkbox');
	elems.on('change', function() {
		$('#list').val(
			elems.filter(':checked').map(function() {
				return this.value;
			}).get().join("\n\t")
		);
	});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<table border="1">
	<tr><td>Category</td>
		<td>Name</td>
		<td>Details</td>
	</tr>
	<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" /> ProductName A</label></td>
		<td><label><input type="checkbox" value="ProductDetail A-1" name="detail" /> ProductDetail A-1</label></td>
	</tr>
	<tr><td rowspan="2"><label><input type="checkbox" value="ProductName B" name="product" /> ProductName B</label></td>
		<td><label><input type="checkbox" value="ProductDetail B-1" name="detail" /> ProductDetail B-1</label></td>
	</tr>
	<tr><td><label><input type="checkbox" value="ProductDetail B-2" name="detail" /> ProductDetail B-2</label></td></tr>
	
	<tr>
		<td rowspan="3"><label><input type="checkbox" value="Category 2" name="category" /> Category 2</label></td>
		<td><label><input type="checkbox" value="ProductName A" name="product" /> ProductName A</label></td>
		<td><label><input type="checkbox" value="ProductDetail A-1" name="detail" /> ProductDetail A-1</label></td>
	</tr>
	<tr><td rowspan="2"><label><input type="checkbox" value="ProductName B" name="product" /> ProductName B</label></td>
		<td><label><input type="checkbox" value="ProductDetail B-1" name="detail" /> ProductDetail B-1</label></td>
	</tr>
	<tr><td><label><input type="checkbox" value="ProductDetail B-2" name="detail" /> ProductDetail B-2</label></td></tr>
</table>

<textarea id="list" rows="10" cols="45" ></textarea>
 </form>

我当前的脚本返回一组换行项:

Category 1
    ProductName A
    ProductDetail A-1
    ProductName B
    ProductDetail B-1
    ProductDetail B-2
    Category 2
    ProductName A
    ProductDetail A-1
    ProductName B
    ProductDetail B-1
    ProductDetail B-2

是否可以像预期的那样查看？或者你有什么想法来满足这个输出吗？

Category 1
    ProductName A
        ProductDetail A-1
    ProductName B
        ProductDetail B-1
        ProductDetail B-2
Category 2
    ProductName A
        ProductDetail A-1
    ProductName B
        ProductDetail B-1
        ProductDetail B-2

Answer 1

试试这个:

$(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")
        );
    });
});

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

为了能够检查父元素是否被选中，您需要在输入中包含有关您的父元素的信息:例如，使用 data-parent 属性，因此您将拥有:html

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

JS

    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")
            );
        });
    });

如果是产品，我们会检查父类别，如果是详情，我们会检查产品和类别。

需要最后一个replace 来防止出现空行。