我是PHP / JQuery / Bootstrap的新手，但我正处于为我的实体业务建立在线交付网站的早期阶段。我在这里创建了一个小提示来演示我的问题：https://jsfiddle.net/dLukvqyd/
复选框工作正常，我可以点击，直到我满心。然后我介绍了jQuery等来实现可折叠的div，这就是它出错的地方。
盐和醋复选框工作正常，但按下自定义按钮时出现的浇头复选框不再起作用。当前已选中的框已在数据库中手动检查为测试数据。
当我删除js引用时，这些复选框可以再次单击。
有什么想法吗？
我已经搜索了很多，但是人们对复选框和jQuery的任何问题似乎都是他们想要使用jQuery来检查一个盒子。而我只想用鼠标点击它们。
谢谢。
<body>
<a href="shopAMSDNA201A.php">Back to menu</a><br/>
<a href="checkout.php">Checkout</a><br/><span id="basketcount">2 `items</span><br/><span id="baskettotal">£6.90</span><br/><div class="divtable"><div class="divtablerow"><div class="divtableheader divtablecell">Item</div><div class="divtableheader divtablecell">Price</div><div class="divtableheader divtablecell">Salt</div><div class="divtableheader divtablecell">Vinegar</div></div><div class="divtablerow"><div class="divtablecell">1/2lb Beef Burger</div><div class="divtablecell" id="productprice127">£5.15</div><div class="divtablecell"><input type="checkbox" name="salt" onclick="updateSaltVinegar('salt',this,488)"/></div><div class="divtablecell"><input type="checkbox" name="vinegar" onclick="updateSaltVinegar('vinegar',this,488)"/></div><div class="divtablecell" id="488"><button data-toggle="collapse" data-target="#customise488">Customise</button></div></div><div class="collapse" data-toggle="collapse" id="customise488"><div class="divtablerow"><div class="divtablecell" ><strong>Choose your toppings</strong></div></div><div class="divtablerow"><div class="divtablecell" ><input type="checkbox" class="freetoppings" name="multinote" onchange="updateMulti('multinoteID',68,this,488,'0',127)" /> 1-Tomato</div></div><div class="divtablerow"><div class="divtablecell" ><input type="checkbox" class="freetoppings" name="multinote" onchange="updateMulti('multinoteID',69,this,488,'0',127)" checked /> 1-Lettuce</div></div><div class="divtablerow"><div class="divtablecell" ><input type="checkbox" class="freetoppings" name="multinote" onchange="updateMulti('multinoteID',70,this,488,'0',127)" /> 1-Raw Onion</div></div><div class="divtablerow"><div class="divtablecell" ><input type="checkbox" class="freetoppings" name="multinote" onchange="updateMulti('multinoteID',71,this,488,'0',127)" /> 1-Fried Onion</div></div><div class="divtablerow"><div class="divtablecell" ><input type="checkbox" class="freetoppings" name="multinote" onchange="updateMulti('multinoteID',72,this,488,'0',127)" /> Thousand Island</div></div><div class="divtablerow"><div class="divtablecell" ><input type="checkbox" class="freetoppings" name="multinote" onchange="updateMulti('multinoteID',73,this,488,'0',127)" /> Mayo</div></div><div class="divtablerow"><div class="divtablecell" ><input type="checkbox" class="freetoppings" name="multinote" onchange="updateMulti('multinoteID',74,this,488,'0',127)" /> Garlic</div></div><div class="divtablerow"><div class="divtablecell" ><input type="checkbox" class="freetoppings" name="multinote" onchange="updateMulti('multinoteID',75,this,488,'0',127)" /> Sweet Chilli</div></div><div class="divtablerow"><div class="divtablecell" ><input type="checkbox" class="freetoppings" name="multinote" onchange="updateMulti('multinoteID',76,this,488,'0',127)" /> Taco</div></div><div class="divtablerow"><div class="divtablecell" ><input type="checkbox" class="freetoppings" name="multinote" onchange="updateMulti('multinoteID',77,this,488,'0',127)" /> Ketchup</div></div><div class="divtablerow"><div class="divtablecell" ><input type="checkbox" class="freetoppings" name="multinote" onchange="updateMulti('multinoteID',78,this,488,'0',127)" /> Brown Sauce</div></div><div class="divtablerow"><div class="divtablecell" ><input type="checkbox" class="freetoppings" name="multinote" onchange="updateMulti('multinoteID',79,this,488,'0',127)" /> BBQ</div></div><div class="divtablerow"><div class="divtablecell" ><input type="checkbox" class="freetoppings" name="multinote" onchange="updateMulti('multinoteID',80,this,488,'0',127)" /> Pepper</div></div><div class="divtablerow"><div class="divtablecell" ><input type="checkbox" class="freetoppings" name="multinote" onchange="updateMulti('multinoteID',81,this,488,'0',127)" /> Buffalo</div></div><div class="divtablerow"><div class="divtablecell" ><input type="checkbox" class="freetoppings" name="multinote" onchange="updateMulti('multinoteID',82,this,488,'0',127)" /> Relish</div></div><div class="divtablerow"><div class="divtablecell" ><input type="checkbox" class="freetoppings" name="multinote" onchange="updateMulti('multinoteID',83,this,488,'0',127)" /> House</div></div><div class="divtablerow"><div class="divtablecell" ><input type="checkbox" class="freetoppings" name="multinote" onchange="updateMulti('multinoteID',84,this,488,'0',127)" /> Kebab</div></div><div class="divtablerow"><div class="divtablecell" ><input type="checkbox" class="freetoppings" name="multinote" onchange="updateMulti('multinoteID',85,this,488,'0',127)" /> Chipotle</div></div><div class="divtablerow"><div class="divtablecell" ><input type="checkbox" class="freetoppings" name="multinote" onchange="updateMulti('multinoteID',86,this,488,'0',127)" /> Mustard</div></div><div class="divtablerow"><div class="divtablecell"><strong>Paid toppings</strong></div></div><div class="divtablerow"><div class="divtablecell"><input type="checkbox" name="multiproduct" id="multiproduct5" onclick="updateMulti('multiplechoiceproductID',5,this,488,0.25,127)" /> Single Onion Ring - £0.25</div></div><div class="divtablerow"><div class="divtablecell"><input type="checkbox" name="multiproduct" id="multiproduct6" onclick="updateMulti('multiplechoiceproductID',6,this,488,0.25,127)" /> Slice of Cheese - £0.25</div></div><div class="divtablerow"><div class="divtablecell"><input type="checkbox" name="multiproduct" id="multiproduct7" onclick="updateMulti('multiplechoiceproductID',7,this,488,0.45,127)" checked /> Mexican Cheese - £0.45</div></div><div class="divtablerow"><div class="divtablecell"><input type="checkbox" name="multiproduct" id="multiproduct8" onclick="updateMulti('multiplechoiceproductID',8,this,488,0.40,127)" /> Pineapple - £0.40</div></div><div class="divtablerow"><div class="divtablecell"><input type="checkbox" name="multiproduct" id="multiproduct9" onclick="updateMulti('multiplechoiceproductID',9,this,488,0.90,127)" /> Slice of Bacon - £0.90</div></div></div><div class="divtablerow"><div class="divtablecell">Cone of chips</div><div class="divtablecell" id="productprice57">£1.75</div><div class="divtablecell"><input type="checkbox" name="salt" onclick="updateSaltVinegar('salt',this,489)"/></div><div class="divtablecell"><input type="checkbox" name="vinegar" onclick="updateSaltVinegar('vinegar',this,489)"/></div><div class="divtablecell" id="489"></div></div></div>`
</body>
===== JS =====
function updateBasket(id,basketID,addremove)
{
var xmlhttp;
var productID = document.getElementById("ID"+id).value;
var productprice = document.getElementById("saleprice"+id).value;
var addremove = addremove;
var vars = "productID="+productID+"&productprice="+productprice+"&basketID="+basketID+"&addremove="+addremove;
// code for IE7+, Firefox, Chrome, Opera, Safari
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
// code for IE6, IE5
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
var a = JSON.parse(xmlhttp.responseText);
if (a.productquantity!=0) {
document.getElementById("productquantity"+productID).innerHTML = a.productquantity;
}
else {
document.getElementById("productquantity"+productID).innerHTML = "";
}
if (a.basketcount==1) {
document.getElementById("basketcount").innerHTML = a.basketcount+" item";
}
else {
document.getElementById("basketcount").innerHTML = a.basketcount+" items";
}
if (a.baskettotal==null) {
document.getElementById("baskettotal").innerHTML = "£0.00";
}
else {
document.getElementById("baskettotal").innerHTML = "£"+a.baskettotal;
}
console.log (xmlhttp.responseText);
}
}
xmlhttp.open("POST","updateBasket.php",true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send(vars);
}
function updateSaltVinegar (column, cb, bpID) {
//alert (column + ": " + cb.checked);
var column = column;
var xmlhttp;
var vars = "column="+column+"&cb="+cb.checked+"&basketproductID="+bpID;
console.log (vars);
// code for IE7+, Firefox, Chrome, Opera, Safari
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
// code for IE6, IE5
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
console.log (xmlhttp.responseText);
}
}
xmlhttp.open("POST","updateSaltVinegar.php",true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send(vars);
}
function updateMulti (column,multiID,cb,bpID,price,pID) {
//alert (column + ": " + cb.checked);
var column = column;
var multiID = multiID;
var price = price;
var pID=pID;
var xmlhttp;
// code for IE7+, Firefox, Chrome, Opera, Safari
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
// code for IE6, IE5
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
if (column=="multiplechoiceproductID") {
var a = JSON.parse(xmlhttp.responseText);
document.getElementById("productprice"+pID).innerHTML = "£"+a.productprice;
document.getElementById("baskettotal").innerHTML = "£"+a.baskettotal;
console.log (xmlhttp.responseText);
}
}
}
var vars = "column="+column+"&multiID="+multiID+"&basketproductID="+bpID+"&price="+price+"&addremove=";
//if cb checked, run add, else run remove
if (cb.checked) {
vars = vars+"add";
}
else {
vars = vars+"remove";
}
vars = vars+"&pID="+pID;
console.log (vars);
xmlhttp.open("POST","updateMulti.php",true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send(vars);
}
===== CSS =====
div {
width: 80%;
}
div.divtable {
display: table;
border: 1px solid green;
table-layout: fixed;
}
div.divtablerow {
display: table-row;
border: 1px solid red;
}
div.divtablecell {
display: table-cell;
border: 1px solid blue;
width: 20%;
}
.divtablecell.divtableheader {
font-weight: bold;
border: 1px solid orange;
}
div.topping {
width: 200px;
height: 30px;
background: #999;
float: left;
margin: 0 2px 2px 0;
text-align: center;
padding-top: 40px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
div.topping:nth-child(3n+1) {
clear:both;
}
@media all and (max-width: 500px) {
div.topping {
float: none;
}
}
答案 0 :(得分：1)
你的HTML格式给了我癌症。如果您以一种很好的方式格式化代码，它会使一切变得更容易，包括调试
将<div class="collapse" data-toggle="collapse" id="customise488">更改为<div class="collapse" id="customise488">以解决您的复选框问题。
混合HTML和JavaScript标记是一种不好的做法，使调试更加困难。由于您已经包含了JQuery for Bootstrap，我建议您将change事件绑定到您的复选框。以下示例。
function updateBasket(id, basketID, addremove) {
var xmlhttp;
var productID = document.getElementById("ID" + id).value;
var productprice = document.getElementById("saleprice" + id).value;
//var addremove = addremove;
var vars = "productID=" + productID + "&productprice=" + productprice + "&basketID=" + basketID + "&addremove=" + addremove;
// code for IE7+, Firefox, Chrome, Opera, Safari
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}
// code for IE6, IE5
else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var a = JSON.parse(xmlhttp.responseText);
if (a.productquantity != 0) {
document.getElementById("productquantity" + productID).innerHTML = a.productquantity;
}
else {
document.getElementById("productquantity" + productID).innerHTML = "";
}
if (a.basketcount == 1) {
document.getElementById("basketcount").innerHTML = a.basketcount + " item";
}
else {
document.getElementById("basketcount").innerHTML = a.basketcount + " items";
}
if (a.baskettotal == null) {
document.getElementById("baskettotal").innerHTML = "£0.00";
}
else {
document.getElementById("baskettotal").innerHTML = "£" + a.baskettotal;
}
console.log(xmlhttp.responseText);
}
};
xmlhttp.open("POST", "updateBasket.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send(vars);
}
function updateSaltVinegar(column, cb, bpID) {
//alert (column + ": " + cb.checked);
//var column = column;
var xmlhttp;
var vars = "column=" + column + "&cb=" + cb.checked + "&basketproductID=" + bpID;
console.log(vars);
// code for IE7+, Firefox, Chrome, Opera, Safari
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}
// code for IE6, IE5
else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
console.log(xmlhttp.responseText);
}
};
xmlhttp.open("POST", "updateSaltVinegar.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send(vars);
}
function updateMulti(event) {
//alert (column + ": " + cb.checked);
var $this = $(this);
var column = $this.attr('data-column');
var multiID = $this.attr('data-multiID');
var bpID = $this.attr('data-bpID');
var price = $this.attr('data-price');
var pID = $this.attr('data-pID');
var xmlhttp;
// code for IE7+, Firefox, Chrome, Opera, Safari
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}
// code for IE6, IE5
else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
if (column == "multiplechoiceproductID") {
var a = JSON.parse(xmlhttp.responseText);
document.getElementById("productprice" + pID).innerHTML = "£" + a.productprice;
document.getElementById("baskettotal").innerHTML = "£" + a.baskettotal;
console.log(xmlhttp.responseText);
}
}
};
var vars = "column=" + column + "&multiID=" + multiID + "&basketproductID=" + bpID + "&price=" + price + "&addremove=";
//if cb checked, run add, else run remove
if ( $this.is(':checked')) {
vars = vars + "add";
}
else {
vars = vars + "remove";
}
vars = vars + "&pID=" + pID;
console.log(vars);
xmlhttp.open("POST", "updateMulti.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send(vars);
}
$(document).on('change', '[data-multiID]',updateMulti);div {
width: 80%;
}
div.divtable {
display: table;
border: 1px solid green;
table-layout: fixed;
}
div.divtablerow {
display: table-row;
border: 1px solid red;
}
div.divtablecell {
display: table-cell;
border: 1px solid blue;
width: 20%;
}
.divtablecell.divtableheader {
font-weight: bold;
border: 1px solid orange;
}
div.topping {
width: 200px;
height: 30px;
background: #999;
float: left;
margin: 0 2px 2px 0;
text-align: center;
padding-top: 40px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
div.topping:nth-child(3n+1) {
clear: both;
}
@media all and (max-width: 500px) {
div.topping {
float: none;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"
type="text/css"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<a href="shopAMSDNA201A.php">Back to menu</a><br/>
<a href="checkout.php">Checkout</a><br/><span id="basketcount">2 items</span><br/><span
id="baskettotal">£6.90</span><br/>
<div class="divtable">
<div class="divtablerow">
<div class="divtableheader divtablecell">Item</div>
<div class="divtableheader divtablecell">Price</div>
<div class="divtableheader divtablecell">Salt</div>
<div class="divtableheader divtablecell">Vinegar</div>
</div>
<div class="divtablerow">
<div class="divtablecell">1/2lb Beef Burger</div>
<div class="divtablecell" id="productprice127">£5.15</div>
<div class="divtablecell"><input type="checkbox" name="salt" onclick="updateSaltVinegar('salt',this,488)"/>
</div>
<div class="divtablecell"><input type="checkbox" name="vinegar"
onclick="updateSaltVinegar('vinegar',this,488)"/></div>
<div class="divtablecell" id="488">
<button data-toggle="collapse" data-target="#customise488">Customise</button>
</div>
</div>
<div class="collapse" id="customise488">
<div class="divtablerow">
<div class="divtablecell"><strong>Choose your toppings</strong></div>
</div>
<div class="divtablerow">
<div class="divtablecell">
<input type="checkbox" class="freetoppings" name="multinote"
data-column="multinoteID" data-multiID="68" data-bpID="488" data-price="0"
data-pID="127"/> 1-Tomato
</div>
</div>
<div class="divtablerow">
<div class="divtablecell"><input type="checkbox" class="freetoppings" name="multinote"
data-column="'multinoteID'" data-multiID="69" data-bpID="488"
data-price="'0'" data-pID="127" checked/>
1-Lettuce
</div>
</div>
<div class="divtablerow">
<div class="divtablecell"><input type="checkbox" class="freetoppings" name="multinote"
data-column="'multinoteID'" data-multiID="70" data-bpID="488"
data-price="'0'" data-pID="127"/> 1-Raw Onion
</div>
</div>
<div class="divtablerow">
<div class="divtablecell"><input type="checkbox" class="freetoppings" name="multinote"
data-column="'multinoteID'" data-multiID="71" data-bpID="488"
data-price="'0'" data-pID="127"/> 1-Fried Onion
</div>
</div>
<div class="divtablerow">
<div class="divtablecell"><input type="checkbox" class="freetoppings" name="multinote"
data-column="'multinoteID'" data-multiID="72" data-bpID="488"
data-price="'0'" data-pID="127"/> Thousand Island
</div>
</div>
<div class="divtablerow">
<div class="divtablecell"><input type="checkbox" class="freetoppings" name="multinote"
data-column="'multinoteID'" data-multiID="73" data-bpID="488"
data-price="'0'" data-pID="127"/> Mayo
</div>
</div>
<div class="divtablerow">
<div class="divtablecell"><input type="checkbox" class="freetoppings" name="multinote"
data-column="'multinoteID'" data-multiID="74" data-bpID="488"
data-price="'0'" data-pID="127"/> Garlic
</div>
</div>
<div class="divtablerow">
<div class="divtablecell"><input type="checkbox" class="freetoppings" name="multinote"
data-column="'multinoteID'" data-multiID="75" data-bpID="488"
data-price="'0'" data-pID="127"/> Sweet Chilli
</div>
</div>
<div class="divtablerow">
<div class="divtablecell"><input type="checkbox" class="freetoppings" name="multinote"
data-column="'multinoteID'" data-multiID="76" data-bpID="488"
data-price="'0'" data-pID="127"/> Taco
</div>
</div>
<div class="divtablerow">
<div class="divtablecell"><input type="checkbox" class="freetoppings" name="multinote"
data-column="'multinoteID'" data-multiID="77" data-bpID="488"
data-price="'0'" data-pID="127"/> Ketchup
</div>
</div>
<div class="divtablerow">
<div class="divtablecell"><input type="checkbox" class="freetoppings" name="multinote"
data-column="'multinoteID'" data-multiID="78" data-bpID="488"
data-price="'0'" data-pID="127"/> Brown Sauce
</div>
</div>
<div class="divtablerow">
<div class="divtablecell"><input type="checkbox" class="freetoppings" name="multinote"
data-column="'multinoteID'" data-multiID="79" data-bpID="488"
data-price="'0'" data-pID="127"/> BBQ
</div>
</div>
<div class="divtablerow">
<div class="divtablecell"><input type="checkbox" class="freetoppings" name="multinote"
data-column="'multinoteID'" data-multiID="80" data-bpID="488"
data-price="'0'" data-pID="127"/> Pepper
</div>
</div>
<div class="divtablerow">
<div class="divtablecell"><input type="checkbox" class="freetoppings" name="multinote"
data-column="'multinoteID'" data-multiID="81" data-bpID="488"
data-price="'0'" data-pID="127"/> Buffalo
</div>
</div>
<div class="divtablerow">
<div class="divtablecell"><input type="checkbox" class="freetoppings" name="multinote"
data-column="'multinoteID'" data-multiID="82" data-bpID="488"
data-price="'0'" data-pID="127"/> Relish
</div>
</div>
<div class="divtablerow">
<div class="divtablecell"><input type="checkbox" class="freetoppings" name="multinote"
data-column="'multinoteID'" data-multiID="83" data-bpID="488"
data-price="'0'" data-pID="127"/> House
</div>
</div>
<div class="divtablerow">
<div class="divtablecell"><input type="checkbox" class="freetoppings" name="multinote"
data-column="'multinoteID'" data-multiID="84" data-bpID="488"
data-price="'0'" data-pID="127"/> Kebab
</div>
</div>
<div class="divtablerow">
<div class="divtablecell"><input type="checkbox" class="freetoppings" name="multinote"
data-column="'multinoteID'" data-multiID="85" data-bpID="488"
data-price="'0'" data-pID="127"/> Chipotle
</div>
</div>
<div class="divtablerow">
<div class="divtablecell"><input type="checkbox" class="freetoppings" name="multinote"
data-column="'multinoteID'" data-multiID="86" data-bpID="488"
data-price="'0'" data-pID="127"/> Mustard
</div>
</div>
<div class="divtablerow">
<div class="divtablecell"><strong>Paid toppings</strong></div>
</div>
<div class="divtablerow">
<div class="divtablecell"><input type="checkbox" name="multiproduct" id="multiproduct5"
data-column="'multiplechoiceproductID'" data-multiID="5"
data-bpID="488" data-price="0.25" data-pID="127"/>
Single Onion Ring - £0.25
</div>
</div>
<div class="divtablerow">
<div class="divtablecell"><input type="checkbox" name="multiproduct" id="multiproduct6"
data-column="'multiplechoiceproductID'" data-multiID="6"
data-bpID="488" data-price="0.25" data-pID="127"/>
Slice of Cheese - £0.25
</div>
</div>
<div class="divtablerow">
<div class="divtablecell"><input type="checkbox" name="multiproduct" id="multiproduct7"
data-column="'multiplechoiceproductID'" data-multiID="7"
data-bpID="488" data-price="0.45" data-pID="127"
checked/> Mexican Cheese - £0.45
</div>
</div>
<div class="divtablerow">
<div class="divtablecell"><input type="checkbox" name="multiproduct" id="multiproduct8"
data-column="'multiplechoiceproductID'" data-multiID="8"
data-bpID="488" data-price="0.40" data-pID="127"/>
Pineapple - £0.40
</div>
</div>
<div class="divtablerow">
<div class="divtablecell"><input type="checkbox" name="multiproduct" id="multiproduct9"
data-column="'multiplechoiceproductID'" data-multiID="9"
data-bpID="488" data-price="0.90" data-pID="127"/>
Slice of Bacon - £0.90
</div>
</div>
</div>
<div class="divtablerow">
<div class="divtablecell">Cone of chips</div>
<div class="divtablecell" id="productprice57">£1.75</div>
<div class="divtablecell"><input type="checkbox" name="salt" onclick="updateSaltVinegar('salt',this,489)"/>
</div>
<div class="divtablecell"><input type="checkbox" name="vinegar"
onclick="updateSaltVinegar('vinegar',this,489)"/></div>
<div class="divtablecell" id="489"></div>
</div>
</div>
编辑1
https://api.jquery.com/change/ 有关更多信息，请参阅JQuery文档。
这一行使JQuery监听具有data-multiID属性的所有元素的change事件。当其中一个元素触发更改事件时，函数updateMulti将处理该事件。传递给change事件处理程序（updateMulti）的唯一参数是event对象。
$(document).on('change', '[data-multiID]',updateMulti);
事件处理程序this内部引用触发事件的对象。
因此$this是已更改的复选框的JQuery对象。
var $this = $(this);
如果回顾HTML标记，每个复选框都有数据属性。下面的行将这些数据属性分配给已更改的复选框中的变量。所以不，您不需要将其他参数传递给事件处理程序。
var column = $this.attr('data-column');
var multiID = $this.attr('data-multiID');
var bpID = $this.attr('data-bpID');
var price = $this.attr('data-price');
var pID = $this.attr('data-pID');