0
私はPHP/JQuery/Bootstrapを初めて使用していますが、私のレンガやモルタルビジネスのオンライン配信Webサイトを作る初期段階です。 https://jsfiddle.net/dLukvqyd/JQuery/Bootstrapを参照した後、チェックボックスを手動でチェックすることはできません
チェックボックスが正常に機能していたため、私の心臓が満足するまで私はクリックすることができました。次に、折りたたみ可能なdivを実現するためにjQueryなどを導入しました。
ソルトと酢のチェックボックスは正常に機能していますが、カスタマイズボタンを押したときに表示されるトッピングチェックボックスはもう機能しません。現在チェックされているボックスは、データベース内でテストデータとして手動でチェックされています。
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;
}
}
例からブートストラップライブラリを削除しようとしました。チェックボックスが再びクリック可能になりました。だから、ブートストラップの問題をjQueryではなく、 – vstelmakh