MySQL & PHP References: Add Multiple Checkbox and Dropdown to Total

Tuesday, April 25, 2017

Add Multiple Checkbox and Dropdown to Total - Javascript

Very Simple, Try this...

<html>
<head>

</head>
<body>
<div id="container"><h1>Add-ons</h1>
<input type="checkbox" name="ch1" value="10" id="qr1" />Add-on Number 1 - 10 QR <br />
<input type="checkbox" name="ch1" value="20" id="qr1" />Add-on Number 2 - 20 QR <br />
<input type="checkbox" name="ch1" value="40" id="qr1" />Add-on Number 3 - 40 QR <br />
<input type="checkbox" name="ch1" value="60" id="qr1" />Add-on Number 4 - 60 QR <br />
</div>

<div> I want more add-ons
<select id="more" name="more">
    <option value="0">0</option>
    <option value="30">1</option>
    <option value="50">2</option>
    <option value="100">3</option>
</select><br><br>
<span id="span"></span><br><br>
 User total usage: <span id="usertotal"> </span>
 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>

function displayVals() {
      calcUsage();
      var singleValues = $("#more").val();         
      $("#span").html("<b>more addons:</b> " + 
                  singleValues + ' QR');
}
var $cbs = $('input[name="ch1"]');
function calcUsage() {
    var total = $("#more").val();
    $cbs.each(function() {
        if (this.checked)
            total = parseInt(total) + parseInt(this.value);
    });
    $("#usertotal").text(total + ' QR');
}

    $("select").change(displayVals);
    displayVals();
//For  checkboxes

$cbs.click(calcUsage);
</script>
</body>
</html>

MySQL & PHP References

Search This Blog

Tuesday, April 25, 2017

Add Multiple Checkbox and Dropdown to Total - Javascript

No comments:

Post a Comment

content-wide advt