Gih
April 29, 2016, 11:46pm
1
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
.
Gih
April 30, 2016, 1:29am
3
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
Gih
April 30, 2016, 1:54am
5
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.
coothead
Gih
April 30, 2016, 2:15am
7
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.
<!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
Gih
April 30, 2016, 2:58am
11
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
Gih
April 30, 2016, 3:02am
12
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.
Gih
April 30, 2016, 3:36am
14
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 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.
coothead
Gih
April 30, 2016, 4:04am
17
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
system
Closed
July 30, 2016, 11:04am
18
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.