Skip to content

Instantly share code, notes, and snippets.

@Elvinz

Elvinz/calculate-checkbox-value.html

Forked from kosh-jp/calculate-checkbox-value.html
Created April 30, 2021 20:32
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Elvinz/8db57759f57ab1e8552170fc97b9cae2 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Elvinz/8db57759f57ab1e8552170fc97b9cae2 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @kosh-jp kosh-jp created this gist Dec 2, 2018.
    25 changes: 25 additions & 0 deletions calculate-checkbox-value.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,25 @@
    <!DOCTYPE html>
    <html>
    <head>
    <script
    src="https://code.jquery.com/jquery-3.3.1.slim.js"
    integrity="sha256-fNXJFIlca05BIO2Y5zh1xrShK3ME+/lYZ0j+ChxX2DA="
    crossorigin="anonymous"></script>
    <script type="text/javascript" src="calculate-checkbox-value.js"></script>
    </head>
    <body>
    <div class="price_sum">
    <form>
    <ul>
    <li><input type="checkbox" checked><span data-price="1">一円</span></li>
    <li><input type="checkbox"><span data-price="10">十円</span></li>
    <li><input type="checkbox" checked><span data-price="100">百円</span></li>
    <li><input type="checkbox"><span data-price="1000">千円</span></li>
    </ul>
    </form>
    </div>
    <div>
    <p>合計金額 : <span class="price_display"></span> 円</p>
    </div>
    </body>
    </html>
    16 changes: 16 additions & 0 deletions calculate-checkbox-value.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,16 @@
    $(function(){
    calPrice();
    $("input").on("change", function(){
    calPrice();
    });

    function calPrice(){
    var totalPrice = 0;
    $(".price_sum li").each(function(){
    if ($(this).find("input").prop("checked")) {
    totalPrice += Number($(this).find("span").data("price"));
    }
    $(".price_display").text(totalPrice);
    });
    }
    });