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

Question

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

​

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

当它是产品时，我们检查父类别，当它是detail时，我们检查产品和类别。

最后一个替换是为了防止出现空行。