改变元素值时更新复选框状态

Question

我是一个网站开发的初学者，我正在做一个网页，在这个网页上，我有一些书籍产品，你可以购买。

每本书的数量在1-5之间，这意味着你可以买到1-5本。

如果我在一个产品上选择一个数量，我希望产品的复选框自动被选中。

但是我的代码中，当我改变产品数量时，页面中的每个复选框都会被选中。

我的代码:

function updatetotal() {
  var quantities = document.getElementsByClassName("amn");
  var sum = 0;
  var floatprice = parseFloat("9.99");
  var sm = document.getElementById("thesum");
  var boxes = document.getElementsByClassName("bought");
  for (var i = 0; i < 6; i++) {
    if (quantities[i].value != null) { //this is were all boxes in the page are checked and I want only the boxes with amounts not null to be checked
      boxes[i].checked = true;
    }
    sum += quantities[i].value * floatprice;
  }
  sm.innerHTML = sum.toString(); //put the sum next to the cart 
}

<!-- a shopping cart which displays my product sum -->
<img src="IMAGES/shopcart.png" id="cart" alt=c art/> = <span id="thesum"> </span> (price of selected products) <!-- I have a total of six books -->


  <div id="p-float">
  
     <div class="p-float"><div class="p-float-in">
            <center><img class="p-img" src="IMAGES\subtle.jpg" alt = subtle_art/ ><br/>
            <div class="p-name">Subtle Art of not giving an F</div>
		    <div class="p-price">$9.99</div>
			<div class = "amount"> Amount:<input type = "number" class="amn" onchange = "updatetotal()"  name = "num"  value = "amount " min = "1" max = "5"/> </div><br/>
            <div class = "buyme">   <input type = "checkbox" class = "bought" name = "box" value = "buy me"/> Buy Me  </div></center>
     </div></div>
  
     <div class="p-float"><div class="p-float-in">
            <center><img class="p-img" src="IMAGES\everything.jpg" alt = every/ ><br/>
            <div class="p-name">Everything is <br/> F</div>
		    <div class="p-price">$9.99</div>
			<div class = "amount"> Amount:<input type = "number" onchange = "updatetotal()" class = "amn" name = "num"  value = "amount" min = "1" max = "5"/> </div><br/>
            <div class = "buyme">   <input type = "checkbox" class = "bought" name = "box" value = "buy me"/> Buy Me  </div></center>
     </div></div>
  
      <div class="p-float"><div class="p-float-in">
            <center><img class="p-img" src="IMAGES\work.jpg" alt = deepw/ ><br/>
            <div class="p-name">Deep </br>Work </div>
		    <div class="p-price">$9.99</div>
			<div class = "amount"> Amount:<input type = "number"  class="amn" onchange = "updatetotal()" name = "num"  value = "amount " min = "1" max = "5"/> </div><br/>
            <div class = "buyme">   <input type = "checkbox" class = "bought" name = "box" value = "buy me"/> Buy Me  </div></center>
     </div></div>
    
	
	  <div class="p-float"><div class="p-float-in">
            <center><img class="p-img" src="IMAGES\giant.jpg" alt = gnt/ ><br/>
            <div class="p-name">Awaken the giant within</div>
		    <div class="p-price">$9.99</div>
			<div class = "amount"> Amount:<input type = "number"  class="amn" onchange = "updatetotal()" name = "num"  value = "amount " min = "1" max = "5"/> </div><br/>
            <div class = "buyme">   <input type = "checkbox" class = "bought" name = "box" value = "buy me"/> Buy Me  </div></center>
     </div></div> 
  
     <div class="p-float"><div class="p-float-in">
            <center><img class="p-img" src="IMAGES\habits.jpg" alt = hbts/ ><br/>
            <div class="p-name">7 Habits of highly effective people</div>
		    <div class="p-price">$9.99</div>
			<div class = "amount"> Amount:<input type = "number" class = "amn" onchange = "updatetotal()" name = "num"  value = "amount " min = "1" max = "5"/> </div><br/>
            <div class = "buyme">   <input type = "checkbox" class = "bought" name = "box" value = "buy me" /> Buy Me  </div></center>
     </div></div>
      
     <div class="p-float"><div class="p-float-in">
            <center><img class="p-img" src="IMAGES\anything.jpg" alt = any/ ><br/>
            <div class="p-name">Achieve anything in 1 year</div>
		    <div class="p-price">$9.99</div>
			<div class = "amount"> Amount:<input type = "number" class="amn" onchange = "updatetotal()" name = "num"  value = "amount " min = "1" max = "5"/> </div><br/>
            <div class = "buyme">   <input type = "checkbox" class = "bought" name = "box" value = "buy me"/> Buy Me  </div></center>
     </div></div>
      
  </div>

Answer 1

如果你改变一下结构，并包裹在一个容器中的每一个产品，你可以做这样的事情，而不改变你的方法。

但我建议你使用javascript事件处理程序，而不是使用html事件属性。

 function updatetotal(event) {
  var boxes = event.target
  var quantities = boxes.closest(".amn");
  var sum = 0;
  var floatprice = parseFloat("9.99");
  var sm = document.getElementById("thesum");
    if (quantities.value) { //this is were all boxes in the page are checked and I want only the boxes with amounts not null to be checked
      boxes.closest('.product').querySelector('.bought').checked = true;
    } else {
	  boxes.closest('.product').querySelector('.bought').checked = false;
	}
	let amountFields = document.querySelectorAll(".amn");
	amountFields.forEach(function(e){
	  sum += e.value * floatprice;
	})	
  sm.innerHTML = sum.toString(); //put the sum next to the cart 
}

    <img src="IMAGES/shopcart.png" id="cart" alt=c art/> = <span id="thesum"> </span> (price of selected products) //an instance of a product (I have a total of six books)

    <div class="p-float">
      <div class="p-float-in">
        <center><img class="p-img" src="IMAGES\work.jpg" alt=d eepw/><br/>
          <div class="p-name">Deep <br>Work </div>
          <div class="p-price">$9.99</div>
          <div class="product">
            <div class="amount"> Amount:<input type="number" class="amn" onchange="updatetotal(event)" name="num" value="amount " min="1" max="5" /> </div><br/>
            <div class="buyme"> <input type="checkbox" class="bought" name="box" value="buy me" /> Buy Me </div>
          </div>
          <div class="product">
            <div class="amount"> Amount:<input type="number" class="amn" onchange="updatetotal(event)" name="num" value="amount " min="1" max="5" /> </div><br/>
            <div class="buyme"> <input type="checkbox" class="bought" name="box1" value="buy me" /> Buy Me </div>
          </div>
          <div class="product">
            <div class="amount"> Amount:<input type="number" class="amn" onchange="updatetotal(event)" name="num" value="amount " min="1" max="5" /> </div><br/>
            <div class="buyme"> <input type="checkbox" class="bought" name="box2" value="buy me" /> Buy Me </div>
          </div>
        </center>
      </div>
    </div>

Answer 2

这里是一个使用授权的版本

我假设id=p-float是最上面的容器，我从p-price div中提取价格。

我已经删除了一些 </br> 和 <br/> 它们是不需要的，其中一些不是有效的HTML，并且妨碍了下一个和上一个ElementSiblings。

我把中心改成了CSS，并去掉了内联的onclick。

我已经引用了图片 alt 属性

window.addEventListener("load", function() { // on page load
  const sm = document.getElementById("thesum"); // this never changes
  document.getElementById("p-float").addEventListener("input", function(e) { // I assume p-float is the top container
    const tgt = e.target; // this is the item that changed
    if (tgt.classList.contains("amn")) { // is it an "amn"? 
      const val = +tgt.value;
      const parent = tgt.parentNode; // get the div it sits in 
      parent.nextElementSibling.querySelector(".bought").checked = val > 0; // set the relative checkbox
    }
    let sum = 0;
    [...document.querySelectorAll(".amn")].forEach(amn => { // sum all amns
      const parent = amn.parentNode;
      let floatprice = parseFloat(parent.previousElementSibling.textContent.slice(1)); // take the price from the price above
      sum += +amn.value * floatprice;
    })
    sm.innerHTML = sum.toString(); //put the sum next to the cart 
  });
});

.p-float-in {
  text-align: center;
}

.p-float img { height: 120px }

<!-- a shopping cart which displays my product sum -->
<img src="http://icons.iconarchive.com/icons/fasticon/shop-cart/48/shop-cart-apply-icon.png" id="cart" alt=c art/> = <span id="thesum"> </span> (price of selected products)
<!-- an instance of a product (I have a total of six books) -->

<div id="p-float">

  <div class="p-float">
    <div class="p-float-in">
      <img class="p-img" src="https://www.deslegte.com/images/cached/resample/jpg/data/uploads/594/900/cms_visual_1150794.jpg_1552736675000_594x900.jpg" alt="subtle_art" /><br/>
      <div class="p-name">Subtle Art of not giving a F</div>
      <div class="p-price">$7.99</div>
      <div class="amount"> Amount:<input type="number" class="amn" name="num" value="amount " min="1" max="5" /> </div>
      <div class="buyme"> <input type="checkbox" class="bought" name="box" value="buy me" /> Buy Me </div>
    </div>
  </div>

  <div class="p-float">
    <div class="p-float-in">
      <img class="p-img" src="https://s.s-bol.com/imgbase0/imagebase3/large/FC/8/8/5/6/9200000095426588.jpg" alt="every" /><br/>
      <div class="p-name">Everything is <br/> F</div>
      <div class="p-price">$8.99</div>
      <div class="amount"> Amount:<input type="number" class="amn" name="num" value="amount" min="1" max="5" /> </div>
      <div class="buyme"> <input type="checkbox" class="bought" name="box" value="buy me" /> Buy Me </div>

    </div>
  </div>

  <div class="p-float">
    <div class="p-float-in">
      <img class="p-img" src="https://media.s-bol.com/DpVDn5wMm6q/450x840.jpg" alt="deepw" /><br/>
      <div class="p-name">Deep </br>Work </div>
      <div class="p-price">$9.99</div>
      <div class="buyme"> <input type="checkbox" class="bought" name="box" value="buy me" /> Buy Me </div>
    </div>
  </div>


  <div class="p-float">
    <div class="p-float-in">
      <img class="p-img" src="https://media.s-bol.com/RWmgDpyPwZw/550x836.jpg" alt "gnt"/><br/>
      <div class="p-name">Awaken the giant within</div>
      <div class="p-price">$10.99</div>
      <div class="amount"> Amount:<input type="number" class="amn" name="num" value="amount " min="1" max="5" /> </div>
      <div class="buyme"> <input type="checkbox" class="bought" name="box" value="buy me" /> Buy Me </div>
    </div>
  </div>

  <div class="p-float">
    <div class="p-float-in">
      <img class="p-img" src="https://media.s-bol.com/YEpBRDx0979Y/550x839.jpg" /><br/>
      <div class="p-name">7 Habits of highly effective people</div>
      <div class="p-price">$29.99</div>
      <div class="amount"> Amount:<input type="number" class="amn" name="num" value="amount " min="1" max="5" /> </div>
      <div class="buyme"> <input type="checkbox" class="bought" name="box" value="buy me" /> Buy Me </div>
    </div>
  </div>
  <div class="p-float">
    <div class="p-float-in">
      <img class="p-img" src="https://media.s-bol.com/Ykq6ykYR1DO/550x839.jpg" alt="any" /><br/>
      <div class="p-name">Achieve anything in 1 year</div>
      <div class="p-price">$39.99</div>
      <div class="amount"> Amount:<input type="number" class="amn" onchange="updatetotal()" name="num" value="amount " min="1" max="5" /> </div>
      <div class="buyme"> <input type="checkbox" class="bought" name="box" value="buy me" /> Buy Me </div>
    </div>
  </div>
</div>

jQuery版本

$(function() { // on page load
  const $sm = $("#thesum"); // this never changes
  $("#p-float").on("input", ".amn", function(e) { // I assume p-float is the top container
      const val = +this.value;
      $(this).closest(".p-float-in").find(".bought").attr("checked",val > 0); // set the relative checkbox
    let sum = 0;
    $(".amn").each(function() { // using .map here could be interesting too
      let floatprice = parseFloat($(this).closest(".p-float-in").find(".p-price").text().slice(1)); // take the price from the price above
      sum += +this.value * floatprice;
    })
    $sm.html("$"+sum.toString()); //put the sum next to the cart 
  });
});

.p-float-in {
  text-align: center;
}

.p-float img { height: 120px }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- a shopping cart which displays my product sum -->
<img src="http://icons.iconarchive.com/icons/fasticon/shop-cart/48/shop-cart-apply-icon.png" id="cart" alt=c art/> = <span id="thesum"> </span> (price of selected products)
<!-- an instance of a product (I have a total of six books) -->

<div id="p-float">

  <div class="p-float">
    <div class="p-float-in">
      <img class="p-img" src="https://www.deslegte.com/images/cached/resample/jpg/data/uploads/594/900/cms_visual_1150794.jpg_1552736675000_594x900.jpg" alt="subtle_art" /><br/>
      <div class="p-name">Subtle Art of not giving a F</div>
      <div class="p-price">$7.99</div>
      <div class="amount"> Amount:<input type="number" class="amn" name="num" value="amount " min="1" max="5" /> </div>
      <div class="buyme"> <input type="checkbox" class="bought" name="box" value="buy me" /> Buy Me </div>
    </div>
  </div>

  <div class="p-float">
    <div class="p-float-in">
      <img class="p-img" src="https://s.s-bol.com/imgbase0/imagebase3/large/FC/8/8/5/6/9200000095426588.jpg" alt="every" /><br/>
      <div class="p-name">Everything is <br/> F</div>
      <div class="p-price">$8.99</div>
      <div class="amount"> Amount:<input type="number" class="amn" name="num" value="amount" min="1" max="5" /> </div>
      <div class="buyme"> <input type="checkbox" class="bought" name="box" value="buy me" /> Buy Me </div>

    </div>
  </div>

  <div class="p-float">
    <div class="p-float-in">
      <img class="p-img" src="https://media.s-bol.com/DpVDn5wMm6q/450x840.jpg" alt="deepw" /><br/>
      <div class="p-name">Deep </br>Work </div>
      <div class="p-price">$9.99</div>
      <div class="buyme"> <input type="checkbox" class="bought" name="box" value="buy me" /> Buy Me </div>
    </div>
  </div>


  <div class="p-float">
    <div class="p-float-in">
      <img class="p-img" src="https://media.s-bol.com/RWmgDpyPwZw/550x836.jpg" alt "gnt"/><br/>
      <div class="p-name">Awaken the giant within</div>
      <div class="p-price">$10.99</div>
      <div class="amount"> Amount:<input type="number" class="amn" name="num" value="amount " min="1" max="5" /> </div>
      <div class="buyme"> <input type="checkbox" class="bought" name="box" value="buy me" /> Buy Me </div>
    </div>
  </div>

  <div class="p-float">
    <div class="p-float-in">
      <img class="p-img" src="https://media.s-bol.com/YEpBRDx0979Y/550x839.jpg" /><br/>
      <div class="p-name">7 Habits of highly effective people</div>
      <div class="p-price">$29.99</div>
      <div class="amount"> Amount:<input type="number" class="amn" name="num" value="amount " min="1" max="5" /> </div>
      <div class="buyme"> <input type="checkbox" class="bought" name="box" value="buy me" /> Buy Me </div>
    </div>
  </div>
  <div class="p-float">
    <div class="p-float-in">
      <img class="p-img" src="https://media.s-bol.com/Ykq6ykYR1DO/550x839.jpg" alt="any" /><br/>
      <div class="p-name">Achieve anything in 1 year</div>
      <div class="p-price">$39.99</div>
      <div class="amount"> Amount:<input type="number" class="amn" onchange="updatetotal()" name="num" value="amount " min="1" max="5" /> </div>
      <div class="buyme"> <input type="checkbox" class="bought" name="box" value="buy me" /> Buy Me </div>
    </div>
  </div>
</div>

Answer 3

(() => {
  document.querySelectorAll('.p-float').forEach((rootNode) => {
    const amountField = rootNode.querySelector('.amn');
    amountField.addEventListener('change', onAmountChanged, false);
    amountField.addEventListener('input', onAmountChanged, false);

    const buyMeCheckbox = rootNode.querySelector('.bought');

    function onAmountChanged() {
      const value = parseInt(amountField.value, 10);
      if (Number.isNaN(value)) {
        // TODO calc the values and update other elements
        buyMeCheckbox.removeAttribute('checked');
        return;
      }

      // TODO calc the values and update other elements
      buyMeCheckbox.setAttribute('checked', '');
    }
  });
})();

<img src="IMAGES/shopcart.png" id="cart" alt=c art/> = <span id="thesum"></span>

<div class="p-float">
  <div class="p-float-in">
    <center><img class="p-img" src="IMAGES\work.jpg" alt=d eepw/><br/>
      <div class="p-name">Deep </br>Work</div>
      <div class="p-price">$9.99</div>
      <div class="amount">
        <span>Amount:</span>
        <input type="number" class="amn" name="num" value="amount" min="1" max="5" /></div>
      <br/>
      <div class="buyme">
        <input type="checkbox" class="bought" name="box" value="buy me" /> Buy Me
      </div>
    </center>
  </div>
</div>

Answer 4

你的代码有很多缺陷，但为了回答你的主要问题，如何勾选自动更新数量的产品的复选框，一个提示-> quantities[i].value !== ''，应该能进一步帮助你。

如果你这样做 console.log(document.getElementsByClassName('amn')[0]);，然后再看属性 value你看到什么了？一个字符串，而不是空。这就是为什么这个if语句是 true 到你所有的复选框并被选中。

function updatetotal() {
  var quantities = document.getElementsByClassName("amn");
  var sum = 0;
  var floatprice = parseFloat("9.99");
  var sm = document.getElementById("thesum");
  var boxes = document.getElementsByClassName("bought");
  for (var i = 0; i < 6; i++) {
    if (quantities[i].value !== "") { //this is were all boxes in the page are checked and I want only the boxes with amounts not null to be checked
      boxes[i].checked = true;
    }
    sum += quantities[i].value * floatprice;
  }
  sm.innerHTML = sum.toString(); //put the sum next to the cart 
}

<!-- a shopping cart which displays my product sum -->
<img src="IMAGES/shopcart.png" id="cart" alt=c art/> = <span id="thesum"> </span> (price of selected products) <!-- I have a total of six books -->


  <div id="p-float">
  
     <div class="p-float"><div class="p-float-in">
            <center><img class="p-img" src="IMAGES\subtle.jpg" alt = subtle_art/ ><br/>
            <div class="p-name">Subtle Art of not giving an F</div>
		    <div class="p-price">$9.99</div>
			<div class = "amount"> Amount:<input type = "number" class="amn" onchange = "updatetotal()"  name = "num"  value = "amount " min = "1" max = "5"/> </div><br/>
            <div class = "buyme">   <input type = "checkbox" class = "bought" name = "box" value = "buy me"/> Buy Me  </div></center>
     </div></div>
  
     <div class="p-float"><div class="p-float-in">
            <center><img class="p-img" src="IMAGES\everything.jpg" alt = every/ ><br/>
            <div class="p-name">Everything is <br/> F</div>
		    <div class="p-price">$9.99</div>
			<div class = "amount"> Amount:<input type = "number" onchange = "updatetotal()" class = "amn" name = "num"  value = "amount" min = "1" max = "5"/> </div><br/>
            <div class = "buyme">   <input type = "checkbox" class = "bought" name = "box" value = "buy me"/> Buy Me  </div></center>
     </div></div>
  
      <div class="p-float"><div class="p-float-in">
            <center><img class="p-img" src="IMAGES\work.jpg" alt = deepw/ ><br/>
            <div class="p-name">Deep </br>Work </div>
		    <div class="p-price">$9.99</div>
			<div class = "amount"> Amount:<input type = "number"  class="amn" onchange = "updatetotal()" name = "num"  value = "amount " min = "1" max = "5"/> </div><br/>
            <div class = "buyme">   <input type = "checkbox" class = "bought" name = "box" value = "buy me"/> Buy Me  </div></center>
     </div></div>
    
	
	  <div class="p-float"><div class="p-float-in">
            <center><img class="p-img" src="IMAGES\giant.jpg" alt = gnt/ ><br/>
            <div class="p-name">Awaken the giant within</div>
		    <div class="p-price">$9.99</div>
			<div class = "amount"> Amount:<input type = "number"  class="amn" onchange = "updatetotal()" name = "num"  value = "amount " min = "1" max = "5"/> </div><br/>
            <div class = "buyme">   <input type = "checkbox" class = "bought" name = "box" value = "buy me"/> Buy Me  </div></center>
     </div></div> 
  
     <div class="p-float"><div class="p-float-in">
            <center><img class="p-img" src="IMAGES\habits.jpg" alt = hbts/ ><br/>
            <div class="p-name">7 Habits of highly effective people</div>
		    <div class="p-price">$9.99</div>
			<div class = "amount"> Amount:<input type = "number" class = "amn" onchange = "updatetotal()" name = "num"  value = "amount " min = "1" max = "5"/> </div><br/>
            <div class = "buyme">   <input type = "checkbox" class = "bought" name = "box" value = "buy me" /> Buy Me  </div></center>
     </div></div>
      
     <div class="p-float"><div class="p-float-in">
            <center><img class="p-img" src="IMAGES\anything.jpg" alt = any/ ><br/>
            <div class="p-name">Achieve anything in 1 year</div>
		    <div class="p-price">$9.99</div>
			<div class = "amount"> Amount:<input type = "number" class="amn" onchange = "updatetotal()" name = "num"  value = "amount " min = "1" max = "5"/> </div><br/>
            <div class = "buyme">   <input type = "checkbox" class = "bought" name = "box" value = "buy me"/> Buy Me  </div></center>
     </div></div>
      
  </div>