Add content in html by clicking the checkbox

Every time I click the checkbox prints the contents repeatedly.
How do I disable the checkbox delete the contents?

Clicking the checkbox needs to print only once, not several times

$(function(){
  $("#checkbox4").change(function() {
    $("#checkout-shipping-address").append("<p>content</p>").toggleClass("show-hide")
  }).change();
})

Do you mean like this ?

Just change append to html.

Yes, but need to delete <p>content</p> html when deselect the checkbox

Hi there Gih,

bearing in mind that I detest JQuery and have
possibly got it all wrong, you could try this…

$(function(){
  $("#checkbox4").change(function() {
  $("#checkout-shipping-address").children("p").remove();
  $("#checkout-shipping-address").append("<p>content</p>").toggleClass("show-hide");
  }).change();
})

coothead

That did not work perfectly, the result is same as the previous, but thanks for trying

Hi there Gih,

when I fiddled with your fiddle, I had these result…

checkbox checked content

checkbox unchecked

checkbox checked content

checkbox unchecked

checkbox checked content

checkbox unchecked

Ennui then took hold of me, so I then ceased testing. :sunglasses:

coothead

:joy:

test again and see on the console, it still remains the <p>content</p>

Hi there Gih,

I forgot to point out, that this project of yours could easily be
done with CSS instead of using the “JQuery” sledgehammer. :sunglasses:

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<style media="screen">
#checkout-shipping-address  {
    display:none;
 }
#checkbox4:checked~#checkout-shipping-address  {
    display:block;
 }
</style>

</head>
<body> 

<input id="checkbox4" type="checkbox">

<div id="checkout-shipping-address">content</div>

</body>
</html>

If you mean that it remains in the script, well it would.

In your original post you wrote…

The amendment that I gave you fulfilled that objective.

coothead

The class may be hiding / showing the content but Gih is right that the code will set the same content over and over when you toggle the checkbox. Here’s how you set different content depending on the checked state.

$("#checkbox4").change(function(event) {
  var html = event.target.checked ? '<p>Content</p>' : '';
  $("#checkout-shipping-address").html(html);
})
1 Like

I’m sorry I have forgotten to insert this detail, because this is the main reason for that in this case I use the jquery and not css.

I will mark the Mark as the best answer because that was what I was looking for

I thank all response

:joy: not have the best answer button

I like it

It still isn’t as good as the no JavaScript version that coothead gave you - his one works even when JavaScript is disabled.

In the console it is necessary that to deselect the checkbox the content is deleted from the html code also. Only with css the content is hidden but remains in the html code. The solution that markbrown4 gave deletes the content visually and also in the console (html)

That’s debatable :slight_smile: Older me would have agreed with you, progressively enhance or nothing!

There’s some really convoluted examples of HTML and CSS to do things that js can do simply, and there’s many example of convoluted JS solutions that can be done much more easily in HTML and CSS. Today, I use the simplest tool for the job.

Hi there Gih,

in this example there is no content in the HTML…

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<style media="screen">
#checkbox4:checked~#checkout-shipping-address::before  {
    content:'content';
 }
</style>
</head>
<body> 
 <input id="checkbox4" type="checkbox">
 <div id="checkout-shipping-address"></div>
</body>
</html>

…and if you blink, you will probably miss the CSS as well. :smirk:

coothead

I liked your solution, but I need to separate the contents of the style sheet.
The content is great

Really css can do many things

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