js根据显示的div自动点击所有atcbtn

Question

js根据显示的div自动点击所有atcbtn
需求：
点击botton#fianlatc后，根据显示在页面的input.atcbtn，同时自动点击
display:none的input.atcbtn不会被点击

<div class="container"
     id="finalform"
     style="">
<botton id="fianlatc" class="custombtn">Add To Cart</botton>
    <div class="product-boxx"
         id="product-laptop"
         style="">
        <p class="producttitle">Laptop</p>
        <p class="productprice">$79.99 USD</p>
  <form method="post" action="/cart/add">
    <input type="hidden" name="id" value="42749446029479" />
    <input type="submit" value="Add to cart" class="atcbtn" />
  </form> 
    </div>
    <div class="product-boxx"
         id="product-monitor"
         style="display:none;">
        <p class="producttitle">Monitor</p>
        <p class="productprice">$69.99 USD</p>
  <form method="post" action="/cart/add">
    <input type="hidden" name="id" value="42749446029480" />
    <input type="submit" value="Add to cart" class="atcbtn" />
  </form> 
    </div>
    <div class="product-boxx"
         id="product-lapmon"
         style="display:none;">
        <p class="producttitle">Laptop</p>
        <p class="productprice">$99.99 USD</p>
  <form method="post" action="/cart/add">
    <input type="hidden" name="id" value="42749446029481" />
    <input type="submit" value="Add to cart" class="atcbtn" />
  </form> 
    </div>
    <div class="product-boxx"
         id="product-monitor2"
         style="display:none;">
        <p class="producttitle">Laptop</p>
        <p class="productprice">$89.99 USD</p>
  <form method="post" action="/cart/add">
    <input type="hidden" name="id" value="42749446029482" />
    <input type="submit" value="Add to cart" class="atcbtn" />
  </form> 
    </div>
    <div class="product-boxx"
         id="product-light"
         style="">
        <p class="producttitle">Laptop Light</p>
        <p class="productprice">$70.00 USD</p>
  <form method="post" action="/cart/add">
    <input type="hidden" name="id" value="42749446029483" />
    <input type="submit" value="Add to cart" class="atcbtn" />
  </form> 
    </div>
    <div class="product-boxx"
         id="product-pad"
         style="">
        <p class="producttitle">Laptop pad</p>
        <p class="productprice">$39.99 USD</p>
  <form method="post" action="/cart/add">
    <input type="hidden" name="id" value="42749446029484" />
    <input type="submit" value="Add to cart" class="atcbtn" />
  </form> 
    </div>
    <div class="product-boxx"
         id="product-micro"
         style="">
        <p class="producttitle">Laptop</p>
        <p class="productprice">$39.99 USD</p>
  <form method="post" action="/cart/add">
    <input type="hidden" name="id" value="42749446029485" />
    <input type="submit" value="Add to cart" class="atcbtn" />
  </form> 
    </div>
<input type="number" id="finalprice">
</div>
 
 

Answer 1

<script>

    function setSum() {
        var sum = 0;
        $('#finalform .product-boxx:visible p.productprice').each(function () {
            sum += parseFloat(this.innerText.substring(1));
        });
        sum = sum.toFixed(2);//保留2位小数，防止浮点数计算精度丢失
        $('#finalprice').val(sum)


        $('#fianlatc').click(function () {
            $('#finalform .product-boxx:visible input.atcbtn').trigger('click')
        })

    }
    function afterform() {
        $('#finalform').show();
        setSum();
    }
</script>

<script>
    /*///这块代码不需要，因为默认finalform容器隐藏的，所以product-boxx也是隐藏的，所以没获取到任何对象，改为上面的代码
    var sum = 0;
    $('#finalform .product-boxx:visible p.productprice').each(function () {
        sum += parseFloat(this.innerText.substring(1));
    });
    sum = sum.toFixed(2);//保留2位小数，防止浮点数计算精度丢失
    $('#finalprice').val(sum)


    $('#fianlatc').click(function () {
        $('#finalform .product-boxx:visible input.atcbtn').trigger('click')
    }) */

</script>