无法在引用JQuery /引导程序后手动检查复选框

我是PHP/JQuery/Bootstrap的新手，但在为我的砖和灰浆业务制作在线交付网站的早期阶段。我创建了一个小提琴演示我的问题在这里：https://jsfiddle.net/dLukvqyd/无法在引用JQuery /引导程序后手动检查复选框

复选框工作正常，我可以点击，直到我的心满意。然后我介绍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">&#163;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">&#163;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 - &#163;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 - &#163;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 - &#163;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 - &#163;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 - &#163;0.90</div></div></div><div class="divtablerow"><div class="divtablecell">Cone of chips</div><div class="divtablecell" id="productprice57">&#163;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 = "&#163;0.00"; 
     } 
     else { 
     document.getElementById("baskettotal").innerHTML = "&#163;"+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 = "&#163;"+a.productprice; 
     document.getElementById("baskettotal").innerHTML = "&#163;"+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; 
    } 
}

来源

2016-11-22 Paul

我尝试从示例中删除引导库，并且复选框会再次变为可点击。所以你应该搜索引导不是问题jQuery – vstelmakh

你的HTML格式了我癌症。如果你以一种很好的方式编码你的代码，它使包括调试在内的一切都变得容易。
更改<div class="collapse" data-toggle="collapse" id="customise488">至<div class="collapse" id="customise488">修复您的复选框问题。
混合使用HTML和JavaScript标记是一种不好的做法，并且使调试更加困难。既然你已经包括JQuery 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 = "&#163;0.00"; 
 
       } 
 
       else { 
 
        document.getElementById("baskettotal").innerHTML = "&#163;" + 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 = "&#163;" + a.productprice; 
 
        document.getElementById("baskettotal").innerHTML = "&#163;" + 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">&#163;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">&#163;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 - &#163;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 - &#163;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 - &#163;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 - &#163;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 - &#163;0.90 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div class="divtablerow"> 
 
     <div class="divtablecell">Cone of chips</div> 
 
     <div class="divtablecell" id="productprice57">&#163;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属性的所有元素的更改事件。当其中一个元素触发更改事件时，功能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');

来源

2016-11-22 14:39:42 bassxzero

嗨bassxzero，感谢您花时间回答我的答复。 – Paul

@Paul np。它能为您提供帮助吗？ – bassxzero

对不起，我发送得太早。正如我所说的，我是PHP的新手，所以也许在每个回声之后我都会加入一些新的功能来帮助格式化HTML。您提供的JS的行如何将所有参数发送到updateMulti？你已经把$（document）.on（'change'，'[data-multiID]'，updateMulti）;因此我认为只会发送data-multiID作为参数？因此，我是否必须将其更改为$（document）.on（'change'，'[data-column]，[data-multiID]，this，[data-bpID]，[data-price]，[data-pID ]”，updateMulti）; ？ – Paul

无法在引用JQuery /引导程序后手动检查复选框

回答

相关问题