If select 3 checkbox then discount the price

JavaScript
1

Hi guys i have some problem using checkbox.
I given the instruction to create a checkbox to calculate a book price
the problem is how to maka if user check 3 checkbox then the final price will discount by 15%.

here is my code:

<html>
    <body>
         <form action="" id="bookform" onsubmit="return false;">
                <div class="book">
                    <input class ="checkbox1" type="checkbox" id="includerooster" name='includerooster' onclick="calculateTotal()" />
                        The Rooster Who Would Not Be Quiet!(PRICE :RM34.00)
                    <input class="checkbox1" type="checkbox" id="includeinstrumental" name='includeinstrumental' onclick="calculateTotal()" />
                        Instrumental: A Memoir of Madness, Medication and Music(PRICE :RM39.00)
                   <input class="checkbox1" type="checkbox" id="includechilbury" name='includechilbury' onclick="calculateTotal()" />
                        The Chilbury Ladies' Choir(PRICE :RM32.00)
                </div>
              <div id="totalPrice"></div>
            </form>
<script>
function roosterPrice()
{
    var roosterPrice=0;
    var theForm = document.forms["bookform"];
    var includeRooster= theForm.elements["includerooster"];
    if(includeRooster.checked==true)
    {
        roosterPrice=34.00;
    }
    return roosterPrice;
}

function instrumentalPrice()
{
    var instrumentalPrice=0;
    var theForm = document.forms["bookform"];
    var includeInstrumental = theForm.elements["includeinstrumental"];
    if(includeinstrumental.checked==true){
        instrumentalPrice=39.00;
    }
    return instrumentalPrice;
}
        function chilburyPrice()
{
    var chilburyPrice=0;
    var theForm = document.forms["bookform"];
    var includeChilbury = theForm.elements["includechilbury"];
    if(includechilbury.checked==true){
        chilburyPrice=32.00;
    }
    return chilburyPrice;
}
        
function calculateTotal()
{

    var finalPrice = roosterPrice() + instrumentalPrice() + chilburyPrice();
    if (finalPrice<100){
    var postage = finalPrice + 10;
    }else{
        var postage = finalPrice;
    }
    var divobj = document.getElementById('totalPrice');
    divobj.style.display='block';
    divobj.innerHTML = "Total Price : RM"+finalPrice+".00"+"<br>"+"Postage : RM"+postage+".00";

}
</script>
        </body>
</html>
2

It helps to have some on-page content to explain about the discount when it occurs.

<div id="tripleDiscount">
    <input class="checkbox1" type="checkbox" name="tripleDiscount" /> 15% discount for all three
</div>

And it helps to hide it from the start. Sometimes CSS is used to hide content, but as we are using JavaScript to reveal this, it’s helpful to also use JavaScript to hide it. In this case, by adding a “hidden” class to the div. That way when JavaScript is not supported, there is a fallback option available that keeps the information visible.

I’ve made it a function so that we can call it later on when we want to show the discount section.

function showDiscount(show) {
    var tripleDiscount = document.querySelector("#tripleDiscount");
    document.querySelector("[name='tripleDiscount']").setAttribute("checked", show);
    if (show) {
        tripleDiscount.classList.remove("hidden");
    } else {
        tripleDiscount.classList.add("hidden");
    }
}
showDiscount(false);

The task of actually hiding it is left to CSS:

.hidden {
    display: none;
}

Now we just need to work on revealing it. The calculateTotal function is called on each checkbox click, so that is where we will also check if all three buttons are checked.

var finalPrice = roosterPrice() + instrumentalPrice() + chilburyPrice();
var hasTripleDiscount = (roosterPrice() > 0 &&
        instrumentalPrice() > 0 &&
        chilburyPrice() > 0);
showDiscount(hasTripleDiscount);
if (hasTripleDiscount) {
    finalPrice = finalPrice * (1 - 0.15);
}

Finally, we need to update the price display because the total may not end in .00 any more. We can use the toFixed() method to easily achieve that.

divobj.innerHTML = "Total Price : RM"+finalPrice.toFixed(2)+"<br>"+"Postage : RM"+postage.toFixed(2);

You can see a working example of the above at https://jsfiddle.net/5kp9upz9/

1 Like
3

tq so much sir .
can u explain what this statement do

var hasTripleDiscount = (roosterPrice() > 0

and how can i make if user check more than 3 then it will do discount?

5

If the roosterPrice returns a positive value, and the other ones below it also return a positive value, then hasTripleDiscount will be set to true.

Since the conditions have changed, the code will need to change to be a more generic solution.

Let’s do this step by step, to show you the process of how this is done.

First we move the hasTripleDiscount calculation in to a separate named function, where we move the existing code that does the check.

function countCheckedBooks() {
	if (roosterPrice() > 0 &&
    instrumentalPrice() > 0 &&
    chilburyPrice() > 0) {
        return 3;
    }
}
...
var hasTripleDiscount = (countCheckedBooks() >= 3);

We can now run the code again to make sure that nothing has broken. It helps to check that everything works as you go, to help catch any problems that may occur.

We want to loop through all of the checkboxes and count how many are checked. We can easily get partway there by checking the checked status of the existing checkboxes.

if (form.elements["includerooster"].checked &&
  form.elements["includeinstrumental"].checked &&
  form.elements["includechilbury"].checked > 0) {
    return 3;
}

As there will be more books in the list, we don’t want to care about the names of the checkboxes. Instead, we want to go through the div with a class of “book” looking at each checkbox inside there. To easily achieve that, we will modify the above code so that it keeps a count.

var checkedBooks = 0;
if (form.elements["includerooster"].checked) {
  checkedBooks += 1;
}
if (form.elements["includeinstrumental"].checked) {
  checkedBooks += 1;
}
if (form.elements["includechilbury"].checked) {
  checkedBooks += 1;
}

We are now ready to turn these if statements in to a loop, or as I prefer in this case, using the filter function to work through the checkboxes.

  var bookNames = ["includerooster", "includeinstrumental", "includechilbury"];
  var checkedBooks = Array.from(checkboxes).filter(function isChecked(input) {
    return input.checked;
  }).length;

We can now get rid of those bookNames by replacing them with the checkboxes:

function countCheckedBooks() {
  var form = document.querySelector("#bookform");
  var bookSection = document.querySelector(".book");
  var checkboxes = bookSection.querySelectorAll("input");
  var checkedBooks = Array.from(checkboxes).filter(function isChecked(input) {
    return input.checked;
  }).length;
  return checkedBooks;
}

And now with the updated countCheckedBooks() function, you can enable the discount when any desired amount of books have been checked:

var hasDiscount = (countCheckedBooks() >= 4);
showDiscount(hasDiscount);
if (hasDiscount) {

You can see the updated code (with 3 books) at https://jsfiddle.net/5kp9upz9/4/

3 Likes
6

ok sir thanks for your help … ^^

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.