How make div disappear when checkbox is selected?

JavaScript
1

How make the red div disappear when checkbox is selected but still keeping the numbers making the addition. I have been trying to make this happen using .style.display = “none”; but its really not working for me, THANKS FOR ANY HELP
codepen
html

    <div class="priceContainer">
        <h1>Shopping cart summary</h1>
        <p>Your total is: <input value="$0.00" readonly="readonly" type="text" id="total"/></p>
    </div>
    <div class="productsContainer">
            <h1>Products</h1>
        <div class="products productOne">
            <input name="product" value="12.95" type="checkbox" id="p1" onclick="totalIt()"/>
            Candy $12.95
        </div>
        <div class="products productTwo">
            <input name="product" value="5.99" type="checkbox" id="p2" onclick="totalIt()"/>
            Burger $5.99
        </div>
        <div class="products producThree">
            <input name="product" value="1.99" type="checkbox" id="p3" onclick="totalIt()"/>
            Coke $1.99
        </div>
    </div>

css

.priceContainer {
    display: inline-block;
    float: left;
    background-color: brown;
    width: 400px;
    height: 500px;
}
.priceContainer p {
    font-size: 25px;
}
h1 {
    text-align: center;
    font-style: italic;
}
.productsContainer {
    display: inline-block;
    margin-left: 2%;
    background-color: gray;
    width: 600px;
    height: 500px;
}

.products {
    display: inline-block;
    width: 150px;
    height: 150px;
    background-color: red;
}
.products p {
    text-align:center;
    vertical-align:middle;
}

js

function totalIt() {
    var input = document.getElementsByName("product");
    var total = 0;
    for (var i = 0; i < input.length; i++) {
      if (input[i].checked) {
        total += parseFloat(input[i].value);
      }
    }
    
    document.getElementById("total").value = "$" + total.toFixed(2);
  }
2

The below code works but it isn’t by any means the most logical way to do it. Also, please check your third id. It is missing a t (productThree instead of producThree).

$(function () {
        $("#p1").click(function () {
            if ($(this).is(":checked")) {
                $(".productOne").hide();
            }
        });
          $("#p2").click(function () {
            if ($(this).is(":checked")) {
                $(".productTwo").hide();
            }
        });
          $("#p3").click(function () {
            if ($(this).is(":checked")) {
                $(".productThree").hide();
            }
        });
   });
1 Like
3

There is a trick to achieve this with CSS.

HTML

      <label class='productContainer' for='p1'>
        <input name="product" value="12.95" type="checkbox" id="p1" onclick="totalIt()"/>
        <div class="products productOne" id='productOne'> Candy $12.95 </div>
      </label>

CSS

.productContainer input{
  display: none;
}
.productContainer input:checked ~ .products{
 background-color: green;
 cursor: pointer; 
}

I pulled your input out of the <div> to make them siblings inside of a <label> for the CSS selector.

The first line of the CSS hides the check box (since it’s now outside of the container)

The second part, selects, the input of .productContainer. Once it is checked it targets its sibling with the class .products using ~… and the properties can be changed.

image
image1770×552 31.1 KB

For information on why ~ is used and other selector options:

3 Likes
4

Are you able to show us this in practice? @pjonp

5

@mb1 sure. I forked OPs sandbox for live example: https://codepen.io/pjonp/pen/MWWPmQY

1 Like
6

how super useful answer but what about having the same result just using vanilla js, do you thing its possible? this looks like jquery isn’t it? Thanks for the help my friend

8

thanks very handy info Im gonna do my best to do it in the best way, thanks alot

9

That is the best way to learn!

If you want a good approach, I would suggest to create an Array of your products. Then populate them into the HTML with JS. This will give you a good ‘database’ to work from to easily add/edit/remove items.

When you go this route you can give each <div> a unique ID and each button onClick a parameter for your totalIt function.

edit: I removed my previous post, since it was a bad solution overall and hacked together to match your current situation. I made a sandbox example to explain what I believe to be a good approach for future use.

HTML:

<div id='imageContainer' />

CSS:

#imageContainer {
  border: 2px solid black;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 75vw;
  min-height: 75vh;
  margin: auto;
}
.imageContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 75%;
  margin: 20px;
  padding: 20px;
  border: 2px solid black;
}
img {
  margin: 10px;
  max-width: 100%;
  height: auto;
}

JS

let imageArr = [
{name: 'Photo1', url:'https://images.unsplash.com/photo-1558981033-f5e2ddd9c57e'},
{name: 'Photo2', url: 'https://images.unsplash.com/photo-1558981285-6f0c94958bb6'},
{name: 'Photo3', url: 'https://images.unsplash.com/photo-1558981403-c5f9899a28bc'}];

let func = (target) => {
  target.style.display = 'none'
};

let addMe = imageArr.map(i => {
  return (
  `<div id='${i.name}' class="imageContainer">
    <img src=${i.url} class="myImages">
    <button class="btn" onclick="func(${i.name})">${i.name}</button>
   </div>`
      )
});

document.getElementById("imageContainer").innerHTML = addMe.join('');

CodePen: https://codepen.io/pjonp/pen/KKKrKBN

1 Like