如何在购物车中获取并提交所选商品？
以下是我的演示，
有两个问题：
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 = ondomainList = ondomainList = ondomainList = on
并且只有最后一个被发送。您需要在名称中添加[]以使其成为数组。domainList[] = ondomainList[] = ondomainList[] = ondomainList[] = 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.comdomainList[] = stackexchange.comdomainList[] = serverfault.com关于javascript - 如何在购物车中获取并提交所选商品？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36967496/