如何获取和提交购物车中的选定商品 - How to get and submit the selected item(s) in shopping cart?

如何在购物车中获取和提交所选商品？

下面是我的演示，
有两个问题：
1、目前，我只能手动获取一个项目，如何获取所有选中的项目
2、如果没有选择任何内容，我希望禁用"提交"按钮。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" type='text/css'>
    <link href="https://cdn.bootcss.com/tether/1.2.0/css/tether.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/tether/1.2.0/css/tether-theme-basic.min.css" rel="stylesheet">
</head>
<body>
<div class="container" id="goodsTable">
    <table class="table">
        <thead>
        <tr>
            <th class="col-xs-3">
                <label class="c-input c-checkbox">
                    <input type="checkbox" name="selectAll" id="selectAll">
                    <span class="c-indicator"></span>Select All
                </label>
            </th>
            <th class="col-xs-5">Name</th>
            <th class="col-xs-4">Number</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td class="col-xs-3">
                <label class="c-input c-checkbox">
                    <input type="checkbox" name="domainList" id="goods_100" class="checkboxSelection">
                    <span class="c-indicator"></span>
                </label>
            </td>
            <td class="col-xs-5">Apple</td>
            <td class="col-xs-4"><input type="text" class="form-control" id="number_100" value="1000"></td>
        </tr>
        <tr>
            <td class="col-xs-3">
                <label class="c-input c-checkbox">
                    <input type="checkbox" name="domainList" id="goods_101" class="checkboxSelection">
                    <span class="c-indicator"></span>
                </label>
            </td>
            <td class="col-xs-5">Pear</td>
            <td class="col-xs-4"><input type="text" class="form-control" id="number_101" value="1200"></td>
        </tr>
        <tr>
            <td class="col-xs-3">
                <label class="c-input c-checkbox">
                    <input type="checkbox" name="domainList" id="goods_102" class="checkboxSelection">
                    <span class="c-indicator"></span>
                </label>
            </td>
            <td class="col-xs-5">Peach</td>
            <td class="col-xs-4"><input type="text" class="form-control" id="number_102" value="1500"></td>
        </tr>
        </tbody>
    </table>
    <button type="button" id="submit" class="btn btn-primary">Submit</button>
</div>
<script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/tether/1.2.0/js/tether.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<script>
    //Select all
    $("#selectAll").change(function () {
        if ($(this).is(":checked")) {
            $(".checkboxSelection").each(function () {
                $(this).prop('checked', true);
            });
        }
        else {
            $(".checkboxSelection").each(function () {
                $(this).prop('checked', false);
            });
        }
    });
    $(".checkboxSelection").change(function () {
        var allSelected = true;
        $(".checkboxSelection").each(function () {
            if (!$(this).is(":checked")) {
                $("#selectAll").prop('checked', false);
                allSelected = false;
            }
        });
        if (allSelected)
            $("#selectAll").prop('checked', true);
    });
</script>

<script>
    //Get the value and submit
    $(function () {
        //Below is getting one of the items,how to get all the selected item(s) ?
        var data = {
            "name": $("#goods_100").val(),
            "number": $("#number_100").val()
        };
        //ajax submit
        $(document).on('submit', '#goodsTable', function (e) {
            e.preventDefault();
            $("#submit").addClass('disabled');
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                        type: "POST",
                        url: "{{ url('/goods/') }}",
                        cache: false,
                        data: data,
                        dataType: "json"
                    })
                    .done(function (msg) {
                        window.location.href = "/goods/success";
                    })
                    .fail(function (textStatus) {
                        $("#submit").removeClass('disabled');
                        alert('Fail,try again');
                    });
        });
    });
</script>
</body>
</html>

您的每个复选框都有相同的名称，因此发生的情况是：

domainList = on
domainList = on
domainList = on
domainList = on

只有最后一个被发送。您需要将[]添加到名称中，使其成为一个数组。

domainList[] = on
domainList[] = on
domainList[] = on
domainList[] = on

这将给Laravel控制器一个数组，而不是一个。

示例：

<input type="checkbox" name="domainList[]" id="goods_102" class="checkboxSelection">

但是，您使用的是复选框。它们的默认值为"on"，只有在选中时才会显示在表单数据中。您肯定应该向其中添加一个value，它表示项目的数据库行。

例如：

<input type="checkbox" name="domainList[]" id="goods_102" class="checkboxSelection" value="stackoverflow.com" >

这将返回字符串数组

domainList[] = stackoverflow.com
domainList[] = stackexchange.com
domainList[] = serverfault.com

为您的第二个问题更新您的脚本：

$(document).ready(function(){
	if($(".table tr input[type='checkbox']:checked").length > 0)
	{
        $('#submit').attr("disabled",false);
	}
	else
	{
        $('#submit').attr("disabled","disabled");
	}
    //Select all
    $("#selectAll").change(function () {
        if ($(this).is(":checked")) {
            $(".checkboxSelection").each(function () {
                $(this).prop('checked', true);
            });
		$('#submit').attr("disabled",false);
        }
        else {
            $(".checkboxSelection").each(function () {
                $(this).prop('checked', false);
            });
		$('#submit').attr("disabled","disabled");
        }
    });
    $(".checkboxSelection").change(function () {
        var allSelected = true;
        $(".checkboxSelection").each(function () {
            if (!$(this).is(":checked")) {
                $("#selectAll").prop('checked', false);
                allSelected = false;
            }
        });
        if (allSelected)
	    {
            $("#selectAll").prop('checked', true);
	    }
	    if($(".table tr input[type='checkbox']:checked").length < 1)
	    {
		  $('#submit').attr("disabled","disabled");
	    }
	    else
	    {
	  		$('#submit').attr("disabled",false);
	    }
    });
});

<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" type='text/css'>
    <link href="https://cdn.bootcss.com/tether/1.2.0/css/tether.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/tether/1.2.0/css/tether-theme-basic.min.css" rel="stylesheet">
</head>
<body>
<div class="container" id="goodsTable">
    <table class="table">
        <thead>
        <tr>
            <th class="col-xs-3">
                <label class="c-input c-checkbox">
                    <input type="checkbox" name="selectAll" id="selectAll">
                    <span class="c-indicator"></span>Select All
                </label>
            </th>
            <th class="col-xs-5">Name</th>
            <th class="col-xs-4">Number</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td class="col-xs-3">
                <label class="c-input c-checkbox">
                    <input type="checkbox" name="domainList" id="goods_100" class="checkboxSelection">
                    <span class="c-indicator"></span>
                </label>
            </td>
            <td class="col-xs-5">Apple</td>
            <td class="col-xs-4"><input type="text" class="form-control" id="number_100" value="1000"></td>
        </tr>
        <tr>
            <td class="col-xs-3">
                <label class="c-input c-checkbox">
                    <input type="checkbox" name="domainList" id="goods_101" class="checkboxSelection">
                    <span class="c-indicator"></span>
                </label>
            </td>
            <td class="col-xs-5">Pear</td>
            <td class="col-xs-4"><input type="text" class="form-control" id="number_101" value="1200"></td>
        </tr>
        <tr>
            <td class="col-xs-3">
                <label class="c-input c-checkbox">
                    <input type="checkbox" name="domainList" id="goods_102" class="checkboxSelection">
                    <span class="c-indicator"></span>
                </label>
            </td>
            <td class="col-xs-5">Peach</td>
            <td class="col-xs-4"><input type="text" class="form-control" id="number_102" value="1500"></td>
        </tr>
        </tbody>
    </table>
    <button type="button" id="submit" class="btn btn-primary">Submit</button>
</div>
<script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/tether/1.2.0/js/tether.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>