Hide element on uncheck
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
1
I have a checkbox pre-selected saying "Use profile address" and address is showing below.
Now what I want is if a customer unchecks the checkbox the pre-shown address gets hidden and a new input saying add different address appears.
I tried to do this using this JS trick. But couldn't achieve what I wanted. Can someone help?
$('#address-checked').change(function(){
if (this.checked) {
$('#address-sh').fadeIn('slow');
} else {
$('#address-sh').fadeOut('slow');
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="address-checked" checked="checked" class="mb-3">
<label class="car-list-step-equipment-label">Use profile address</label>
<address> 9 Longacre Road<br />London, GB, E17 4DT</address>
<div id="address-sh">
<input type="text" />
</div>javascript html uncheck
edited Nov 23 '18 at 15:52
Scott Marcus
40.6k52141
asked Nov 23 '18 at 15:28
Ibadullah KhanIbadullah Khan
456
add a comment |
1
I have a checkbox pre-selected saying "Use profile address" and address is showing below.
Now what I want is if a customer unchecks the checkbox the pre-shown address gets hidden and a new input saying add different address appears.
I tried to do this using this JS trick. But couldn't achieve what I wanted. Can someone help?
$('#address-checked').change(function(){
if (this.checked) {
$('#address-sh').fadeIn('slow');
} else {
$('#address-sh').fadeOut('slow');
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="address-checked" checked="checked" class="mb-3">
<label class="car-list-step-equipment-label">Use profile address</label>
<address> 9 Longacre Road<br />London, GB, E17 4DT</address>
<div id="address-sh">
<input type="text" />
</div>javascript html uncheck
edited Nov 23 '18 at 15:52
Scott Marcus
40.6k52141
asked Nov 23 '18 at 15:28
Ibadullah KhanIbadullah Khan
456
I'm voting to close this question as off-topic because the code you posted works.
– rlemon
Nov 23 '18 at 15:33
@rlemon Re-read the question. The code does not do what the OP wants it to do and so it does't work.
– Scott Marcus
Nov 23 '18 at 15:52
add a comment |
1
1
1
I have a checkbox pre-selected saying "Use profile address" and address is showing below.
Now what I want is if a customer unchecks the checkbox the pre-shown address gets hidden and a new input saying add different address appears.
I tried to do this using this JS trick. But couldn't achieve what I wanted. Can someone help?
$('#address-checked').change(function(){
if (this.checked) {
$('#address-sh').fadeIn('slow');
} else {
$('#address-sh').fadeOut('slow');
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="address-checked" checked="checked" class="mb-3">
<label class="car-list-step-equipment-label">Use profile address</label>
<address> 9 Longacre Road<br />London, GB, E17 4DT</address>
<div id="address-sh">
<input type="text" />
</div>javascript html uncheck
edited Nov 23 '18 at 15:52
Scott Marcus
40.6k52141
asked Nov 23 '18 at 15:28
Ibadullah KhanIbadullah Khan
456
I have a checkbox pre-selected saying "Use profile address" and address is showing below.
Now what I want is if a customer unchecks the checkbox the pre-shown address gets hidden and a new input saying add different address appears.
I tried to do this using this JS trick. But couldn't achieve what I wanted. Can someone help?
$('#address-checked').change(function(){
if (this.checked) {
$('#address-sh').fadeIn('slow');
} else {
$('#address-sh').fadeOut('slow');
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="address-checked" checked="checked" class="mb-3">
<label class="car-list-step-equipment-label">Use profile address</label>
<address> 9 Longacre Road<br />London, GB, E17 4DT</address>
<div id="address-sh">
<input type="text" />
</div> $('#address-checked').change(function(){
if (this.checked) {
$('#address-sh').fadeIn('slow');
} else {
$('#address-sh').fadeOut('slow');
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="address-checked" checked="checked" class="mb-3">
<label class="car-list-step-equipment-label">Use profile address</label>
<address> 9 Longacre Road<br />London, GB, E17 4DT</address>
<div id="address-sh">
<input type="text" />
</div> $('#address-checked').change(function(){
if (this.checked) {
$('#address-sh').fadeIn('slow');
} else {
$('#address-sh').fadeOut('slow');
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="address-checked" checked="checked" class="mb-3">
<label class="car-list-step-equipment-label">Use profile address</label>
<address> 9 Longacre Road<br />London, GB, E17 4DT</address>
<div id="address-sh">
<input type="text" />
</div>javascript html uncheck
javascript html uncheck
edited Nov 23 '18 at 15:52
Scott Marcus
40.6k52141
asked Nov 23 '18 at 15:28
Ibadullah KhanIbadullah Khan
456
edited Nov 23 '18 at 15:52
Scott Marcus
40.6k52141
asked Nov 23 '18 at 15:28
Ibadullah KhanIbadullah Khan
456
edited Nov 23 '18 at 15:52
Scott Marcus
40.6k52141
edited Nov 23 '18 at 15:52
Scott Marcus
40.6k52141
edited Nov 23 '18 at 15:52
Scott Marcus
40.6k52141
40.6k52141
asked Nov 23 '18 at 15:28
Ibadullah KhanIbadullah Khan
456
asked Nov 23 '18 at 15:28
Ibadullah KhanIbadullah Khan
456
asked Nov 23 '18 at 15:28
Ibadullah KhanIbadullah Khan
456
456
I'm voting to close this question as off-topic because the code you posted works.
– rlemon
Nov 23 '18 at 15:33
@rlemon Re-read the question. The code does not do what the OP wants it to do and so it does't work.
– Scott Marcus
Nov 23 '18 at 15:52
add a comment |
I'm voting to close this question as off-topic because the code you posted works.
– rlemon
Nov 23 '18 at 15:33
@rlemon Re-read the question. The code does not do what the OP wants it to do and so it does't work.
– Scott Marcus
Nov 23 '18 at 15:52
I'm voting to close this question as off-topic because the code you posted works.
– rlemon
Nov 23 '18 at 15:33
I'm voting to close this question as off-topic because the code you posted works.
– rlemon
Nov 23 '18 at 15:33
@rlemon Re-read the question. The code does not do what the OP wants it to do and so it does't work.
– Scott Marcus
Nov 23 '18 at 15:52
@rlemon Re-read the question. The code does not do what the OP wants it to do and so it does't work.
– Scott Marcus
Nov 23 '18 at 15:52
add a comment |
3 Answers
3
active
oldest
votes
1
and a new input saying add different address appears.
Add this new input and toggle the display basing on the check/uncheck performed by the user:
$('#address-checked').change(function() {
$('#address-sh').toggle(!this.checked);
$('address').toggle(this.checked);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="address-checked" checked="checked" class="mb-3">
<label class="car-list-step-equipment-label">Use profile address</label>
<address>9 Longacre Road<br />London, GB, E17 4DT</address>
<div id="address-sh" style="display: none">
Enter new address: <input type="text" />
</div>answered Nov 23 '18 at 15:37
Zakaria AcharkiZakaria Acharki
57k134471
Try this @Ibadullah
– Zakaria Acharki
Nov 23 '18 at 15:40
1
Sir even on this the input field is visible on page load. By default I want the input field to be hidden and it should appear on uncheck.
– Ibadullah Khan
Nov 23 '18 at 15:42
1
Updater sir try it now
– Zakaria Acharki
Nov 23 '18 at 15:44
add a comment |
2
You were simply hiding/showing the wrong HTML element. Changing the selector to just the address element fixes the issue. But, going a bit further, if you initialize the textbox and its label so that they are hidden at the start, then you don't need an if/else statement at all. You can just toggle the address and the textbox when the checkbox gets checked.
$('#address-checked').on("change", function(){
// You don't need and if/then here. Just toggle the visibility
$('address').toggle('slow');
$('.hidden').toggle('slow');
});.hidden { display:none; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="address-checked" checked="checked" class="mb-3">
<label class="car-list-step-equipment-label">Use profile address</label>
<address>
9 Longacre Road<br>
London, GB, E17 4DT
</address>
<div id="address-sh" class="hidden">
<label>Enter new address: <input type="text"></label>
</div>Additionally, JQuery no longer recommends the use of shortcut event methods, such as change. Instead, the recommend the on() method, that you pass the event name to.
Lastly (FYI), don't self-terminate your HTML tags. That's a left over syntax from the days of XHTML and really serves no purpose today. In fact, using that syntax can actually introduce bugs into your code. Read this for details.
answered Nov 23 '18 at 15:34
Scott MarcusScott Marcus
40.6k52141
1
With this, you solved half of the issue. The address gets perfectly hidden when unselected. Now the second part is, by default the input field below address is hidden and it prevails with the same uncheck with which the address is fading away.
– Ibadullah Khan
Nov 23 '18 at 15:39
1
@IbadullahKhan See updated answer. Fixed small bug.
– Scott Marcus
Nov 23 '18 at 15:39
How to eliminate this slowing effect, sir?
– Ibadullah Khan
Nov 23 '18 at 15:54
1
@IbadullahKhan Take outslowfrom thetoggle()command.
– Scott Marcus
Nov 23 '18 at 15:56
Which self-terminating tag you're talking about?
– Ibadullah Khan
Nov 23 '18 at 16:41
|
show 3 more comments
0
You have given id to input type text div and you are trying address label
$('#address-checked').change(function(){
if ($(this).is(':checked')) {
$('#address').fadeIn('slow');
$('#address-sh').fadeOut('slow');
} else {
$('#address').fadeOut('slow');
$('#address-sh').fadeIn('slow');
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="address-checked" checked="checked">
<label class="car-list-step-equipment-label">Use profile address</label>
<address id="address">
9 Longacre Road<br />
London, GB, E17 4DT
</address>
<div id="address-sh" style="display:none;">
<input type="text" />
</div>answered Nov 23 '18 at 15:38
Krishna JonnalagaddaKrishna Jonnalagadda
1,4421720
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53449330%2fhide-element-on-uncheck%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
and a new input saying add different address appears.
Add this new input and toggle the display basing on the check/uncheck performed by the user:
$('#address-checked').change(function() {
$('#address-sh').toggle(!this.checked);
$('address').toggle(this.checked);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="address-checked" checked="checked" class="mb-3">
<label class="car-list-step-equipment-label">Use profile address</label>
<address>9 Longacre Road<br />London, GB, E17 4DT</address>
<div id="address-sh" style="display: none">
Enter new address: <input type="text" />
</div>answered Nov 23 '18 at 15:37
Zakaria AcharkiZakaria Acharki
57k134471
Try this @Ibadullah
– Zakaria Acharki
Nov 23 '18 at 15:40
1
Sir even on this the input field is visible on page load. By default I want the input field to be hidden and it should appear on uncheck.
– Ibadullah Khan
Nov 23 '18 at 15:42
1
Updater sir try it now
– Zakaria Acharki
Nov 23 '18 at 15:44
add a comment |
1
and a new input saying add different address appears.
Add this new input and toggle the display basing on the check/uncheck performed by the user:
$('#address-checked').change(function() {
$('#address-sh').toggle(!this.checked);
$('address').toggle(this.checked);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="address-checked" checked="checked" class="mb-3">
<label class="car-list-step-equipment-label">Use profile address</label>
<address>9 Longacre Road<br />London, GB, E17 4DT</address>
<div id="address-sh" style="display: none">
Enter new address: <input type="text" />
</div>answered Nov 23 '18 at 15:37
Zakaria AcharkiZakaria Acharki
57k134471
Try this @Ibadullah
– Zakaria Acharki
Nov 23 '18 at 15:40
1
Sir even on this the input field is visible on page load. By default I want the input field to be hidden and it should appear on uncheck.
– Ibadullah Khan
Nov 23 '18 at 15:42
1
Updater sir try it now
– Zakaria Acharki
Nov 23 '18 at 15:44
add a comment |
1
1
1
and a new input saying add different address appears.
Add this new input and toggle the display basing on the check/uncheck performed by the user:
$('#address-checked').change(function() {
$('#address-sh').toggle(!this.checked);
$('address').toggle(this.checked);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="address-checked" checked="checked" class="mb-3">
<label class="car-list-step-equipment-label">Use profile address</label>
<address>9 Longacre Road<br />London, GB, E17 4DT</address>
<div id="address-sh" style="display: none">
Enter new address: <input type="text" />
</div>answered Nov 23 '18 at 15:37
Zakaria AcharkiZakaria Acharki
57k134471
and a new input saying add different address appears.
Add this new input and toggle the display basing on the check/uncheck performed by the user:
$('#address-checked').change(function() {
$('#address-sh').toggle(!this.checked);
$('address').toggle(this.checked);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="address-checked" checked="checked" class="mb-3">
<label class="car-list-step-equipment-label">Use profile address</label>
<address>9 Longacre Road<br />London, GB, E17 4DT</address>
<div id="address-sh" style="display: none">
Enter new address: <input type="text" />
</div>$('#address-checked').change(function() {
$('#address-sh').toggle(!this.checked);
$('address').toggle(this.checked);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="address-checked" checked="checked" class="mb-3">
<label class="car-list-step-equipment-label">Use profile address</label>
<address>9 Longacre Road<br />London, GB, E17 4DT</address>
<div id="address-sh" style="display: none">
Enter new address: <input type="text" />
</div>$('#address-checked').change(function() {
$('#address-sh').toggle(!this.checked);
$('address').toggle(this.checked);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="address-checked" checked="checked" class="mb-3">
<label class="car-list-step-equipment-label">Use profile address</label>
<address>9 Longacre Road<br />London, GB, E17 4DT</address>
<div id="address-sh" style="display: none">
Enter new address: <input type="text" />
</div>answered Nov 23 '18 at 15:37
Zakaria AcharkiZakaria Acharki
57k134471
edited Nov 23 '18 at 15:44
answered Nov 23 '18 at 15:37
Zakaria AcharkiZakaria Acharki
57k134471
answered Nov 23 '18 at 15:37
Zakaria AcharkiZakaria Acharki
57k134471
answered Nov 23 '18 at 15:37
Zakaria AcharkiZakaria Acharki
57k134471
57k134471
Try this @Ibadullah
– Zakaria Acharki
Nov 23 '18 at 15:40
1
Sir even on this the input field is visible on page load. By default I want the input field to be hidden and it should appear on uncheck.
– Ibadullah Khan
Nov 23 '18 at 15:42
1
Updater sir try it now
– Zakaria Acharki
Nov 23 '18 at 15:44
add a comment |
Try this @Ibadullah
– Zakaria Acharki
Nov 23 '18 at 15:40
1
Sir even on this the input field is visible on page load. By default I want the input field to be hidden and it should appear on uncheck.
– Ibadullah Khan
Nov 23 '18 at 15:42
1
Updater sir try it now
– Zakaria Acharki
Nov 23 '18 at 15:44
Try this @Ibadullah
– Zakaria Acharki
Nov 23 '18 at 15:40
Try this @Ibadullah
– Zakaria Acharki
Nov 23 '18 at 15:40
1
1
Sir even on this the input field is visible on page load. By default I want the input field to be hidden and it should appear on uncheck.
– Ibadullah Khan
Nov 23 '18 at 15:42
Sir even on this the input field is visible on page load. By default I want the input field to be hidden and it should appear on uncheck.
– Ibadullah Khan
Nov 23 '18 at 15:42
1
1
Updater sir try it now
– Zakaria Acharki
Nov 23 '18 at 15:44
Updater sir try it now
– Zakaria Acharki
Nov 23 '18 at 15:44
add a comment |
2
You were simply hiding/showing the wrong HTML element. Changing the selector to just the address element fixes the issue. But, going a bit further, if you initialize the textbox and its label so that they are hidden at the start, then you don't need an if/else statement at all. You can just toggle the address and the textbox when the checkbox gets checked.
$('#address-checked').on("change", function(){
// You don't need and if/then here. Just toggle the visibility
$('address').toggle('slow');
$('.hidden').toggle('slow');
});.hidden { display:none; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="address-checked" checked="checked" class="mb-3">
<label class="car-list-step-equipment-label">Use profile address</label>
<address>
9 Longacre Road<br>
London, GB, E17 4DT
</address>
<div id="address-sh" class="hidden">
<label>Enter new address: <input type="text"></label>
</div>Additionally, JQuery no longer recommends the use of shortcut event methods, such as change. Instead, the recommend the on() method, that you pass the event name to.
Lastly (FYI), don't self-terminate your HTML tags. That's a left over syntax from the days of XHTML and really serves no purpose today. In fact, using that syntax can actually introduce bugs into your code. Read this for details.
answered Nov 23 '18 at 15:34
Scott MarcusScott Marcus
40.6k52141
1
With this, you solved half of the issue. The address gets perfectly hidden when unselected. Now the second part is, by default the input field below address is hidden and it prevails with the same uncheck with which the address is fading away.
– Ibadullah Khan
Nov 23 '18 at 15:39
1
@IbadullahKhan See updated answer. Fixed small bug.
– Scott Marcus
Nov 23 '18 at 15:39
How to eliminate this slowing effect, sir?
– Ibadullah Khan
Nov 23 '18 at 15:54
1
@IbadullahKhan Take outslowfrom thetoggle()command.
– Scott Marcus
Nov 23 '18 at 15:56
Which self-terminating tag you're talking about?
– Ibadullah Khan
Nov 23 '18 at 16:41
|
show 3 more comments
2
You were simply hiding/showing the wrong HTML element. Changing the selector to just the address element fixes the issue. But, going a bit further, if you initialize the textbox and its label so that they are hidden at the start, then you don't need an if/else statement at all. You can just toggle the address and the textbox when the checkbox gets checked.
$('#address-checked').on("change", function(){
// You don't need and if/then here. Just toggle the visibility
$('address').toggle('slow');
$('.hidden').toggle('slow');
});.hidden { display:none; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="address-checked" checked="checked" class="mb-3">
<label class="car-list-step-equipment-label">Use profile address</label>
<address>
9 Longacre Road<br>
London, GB, E17 4DT
</address>
<div id="address-sh" class="hidden">
<label>Enter new address: <input type="text"></label>
</div>Additionally, JQuery no longer recommends the use of shortcut event methods, such as change. Instead, the recommend the on() method, that you pass the event name to.
Lastly (FYI), don't self-terminate your HTML tags. That's a left over syntax from the days of XHTML and really serves no purpose today. In fact, using that syntax can actually introduce bugs into your code. Read this for details.
answered Nov 23 '18 at 15:34
Scott MarcusScott Marcus
40.6k52141
1
With this, you solved half of the issue. The address gets perfectly hidden when unselected. Now the second part is, by default the input field below address is hidden and it prevails with the same uncheck with which the address is fading away.
– Ibadullah Khan
Nov 23 '18 at 15:39
1
@IbadullahKhan See updated answer. Fixed small bug.
– Scott Marcus
Nov 23 '18 at 15:39
How to eliminate this slowing effect, sir?
– Ibadullah Khan
Nov 23 '18 at 15:54
1
@IbadullahKhan Take outslowfrom thetoggle()command.
– Scott Marcus
Nov 23 '18 at 15:56
Which self-terminating tag you're talking about?
– Ibadullah Khan
Nov 23 '18 at 16:41
|
show 3 more comments
2
2
2
You were simply hiding/showing the wrong HTML element. Changing the selector to just the address element fixes the issue. But, going a bit further, if you initialize the textbox and its label so that they are hidden at the start, then you don't need an if/else statement at all. You can just toggle the address and the textbox when the checkbox gets checked.
$('#address-checked').on("change", function(){
// You don't need and if/then here. Just toggle the visibility
$('address').toggle('slow');
$('.hidden').toggle('slow');
});.hidden { display:none; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="address-checked" checked="checked" class="mb-3">
<label class="car-list-step-equipment-label">Use profile address</label>
<address>
9 Longacre Road<br>
London, GB, E17 4DT
</address>
<div id="address-sh" class="hidden">
<label>Enter new address: <input type="text"></label>
</div>Additionally, JQuery no longer recommends the use of shortcut event methods, such as change. Instead, the recommend the on() method, that you pass the event name to.
Lastly (FYI), don't self-terminate your HTML tags. That's a left over syntax from the days of XHTML and really serves no purpose today. In fact, using that syntax can actually introduce bugs into your code. Read this for details.
answered Nov 23 '18 at 15:34
Scott MarcusScott Marcus
40.6k52141
You were simply hiding/showing the wrong HTML element. Changing the selector to just the address element fixes the issue. But, going a bit further, if you initialize the textbox and its label so that they are hidden at the start, then you don't need an if/else statement at all. You can just toggle the address and the textbox when the checkbox gets checked.
$('#address-checked').on("change", function(){
// You don't need and if/then here. Just toggle the visibility
$('address').toggle('slow');
$('.hidden').toggle('slow');
});.hidden { display:none; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="address-checked" checked="checked" class="mb-3">
<label class="car-list-step-equipment-label">Use profile address</label>
<address>
9 Longacre Road<br>
London, GB, E17 4DT
</address>
<div id="address-sh" class="hidden">
<label>Enter new address: <input type="text"></label>
</div>Additionally, JQuery no longer recommends the use of shortcut event methods, such as change. Instead, the recommend the on() method, that you pass the event name to.
Lastly (FYI), don't self-terminate your HTML tags. That's a left over syntax from the days of XHTML and really serves no purpose today. In fact, using that syntax can actually introduce bugs into your code. Read this for details.
$('#address-checked').on("change", function(){
// You don't need and if/then here. Just toggle the visibility
$('address').toggle('slow');
$('.hidden').toggle('slow');
});.hidden { display:none; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="address-checked" checked="checked" class="mb-3">
<label class="car-list-step-equipment-label">Use profile address</label>
<address>
9 Longacre Road<br>
London, GB, E17 4DT
</address>
<div id="address-sh" class="hidden">
<label>Enter new address: <input type="text"></label>
</div>$('#address-checked').on("change", function(){
// You don't need and if/then here. Just toggle the visibility
$('address').toggle('slow');
$('.hidden').toggle('slow');
});.hidden { display:none; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="address-checked" checked="checked" class="mb-3">
<label class="car-list-step-equipment-label">Use profile address</label>
<address>
9 Longacre Road<br>
London, GB, E17 4DT
</address>
<div id="address-sh" class="hidden">
<label>Enter new address: <input type="text"></label>
</div>answered Nov 23 '18 at 15:34
Scott MarcusScott Marcus
40.6k52141
edited Nov 23 '18 at 18:17
answered Nov 23 '18 at 15:34
Scott MarcusScott Marcus
40.6k52141
answered Nov 23 '18 at 15:34
Scott MarcusScott Marcus
40.6k52141
answered Nov 23 '18 at 15:34
Scott MarcusScott Marcus
40.6k52141
40.6k52141
1
With this, you solved half of the issue. The address gets perfectly hidden when unselected. Now the second part is, by default the input field below address is hidden and it prevails with the same uncheck with which the address is fading away.
– Ibadullah Khan
Nov 23 '18 at 15:39
1
@IbadullahKhan See updated answer. Fixed small bug.
– Scott Marcus
Nov 23 '18 at 15:39
How to eliminate this slowing effect, sir?
– Ibadullah Khan
Nov 23 '18 at 15:54
1
@IbadullahKhan Take outslowfrom thetoggle()command.
– Scott Marcus
Nov 23 '18 at 15:56
Which self-terminating tag you're talking about?
– Ibadullah Khan
Nov 23 '18 at 16:41
|
show 3 more comments
1
With this, you solved half of the issue. The address gets perfectly hidden when unselected. Now the second part is, by default the input field below address is hidden and it prevails with the same uncheck with which the address is fading away.
– Ibadullah Khan
Nov 23 '18 at 15:39
1
@IbadullahKhan See updated answer. Fixed small bug.
– Scott Marcus
Nov 23 '18 at 15:39
How to eliminate this slowing effect, sir?
– Ibadullah Khan
Nov 23 '18 at 15:54
1
@IbadullahKhan Take outslowfrom thetoggle()command.
– Scott Marcus
Nov 23 '18 at 15:56
Which self-terminating tag you're talking about?
– Ibadullah Khan
Nov 23 '18 at 16:41
1
1
With this, you solved half of the issue. The address gets perfectly hidden when unselected. Now the second part is, by default the input field below address is hidden and it prevails with the same uncheck with which the address is fading away.
– Ibadullah Khan
Nov 23 '18 at 15:39
With this, you solved half of the issue. The address gets perfectly hidden when unselected. Now the second part is, by default the input field below address is hidden and it prevails with the same uncheck with which the address is fading away.
– Ibadullah Khan
Nov 23 '18 at 15:39
1
1
@IbadullahKhan See updated answer. Fixed small bug.
– Scott Marcus
Nov 23 '18 at 15:39
@IbadullahKhan See updated answer. Fixed small bug.
– Scott Marcus
Nov 23 '18 at 15:39
How to eliminate this slowing effect, sir?
– Ibadullah Khan
Nov 23 '18 at 15:54
How to eliminate this slowing effect, sir?
– Ibadullah Khan
Nov 23 '18 at 15:54
1
1
@IbadullahKhan Take out
slow from the toggle() command.– Scott Marcus
Nov 23 '18 at 15:56
@IbadullahKhan Take out
slow from the toggle() command.– Scott Marcus
Nov 23 '18 at 15:56
Which self-terminating tag you're talking about?
– Ibadullah Khan
Nov 23 '18 at 16:41
Which self-terminating tag you're talking about?
– Ibadullah Khan
Nov 23 '18 at 16:41
|
show 3 more comments
0
You have given id to input type text div and you are trying address label
$('#address-checked').change(function(){
if ($(this).is(':checked')) {
$('#address').fadeIn('slow');
$('#address-sh').fadeOut('slow');
} else {
$('#address').fadeOut('slow');
$('#address-sh').fadeIn('slow');
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="address-checked" checked="checked">
<label class="car-list-step-equipment-label">Use profile address</label>
<address id="address">
9 Longacre Road<br />
London, GB, E17 4DT
</address>
<div id="address-sh" style="display:none;">
<input type="text" />
</div>answered Nov 23 '18 at 15:38
Krishna JonnalagaddaKrishna Jonnalagadda
1,4421720
add a comment |
0
You have given id to input type text div and you are trying address label
$('#address-checked').change(function(){
if ($(this).is(':checked')) {
$('#address').fadeIn('slow');
$('#address-sh').fadeOut('slow');
} else {
$('#address').fadeOut('slow');
$('#address-sh').fadeIn('slow');
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="address-checked" checked="checked">
<label class="car-list-step-equipment-label">Use profile address</label>
<address id="address">
9 Longacre Road<br />
London, GB, E17 4DT
</address>
<div id="address-sh" style="display:none;">
<input type="text" />
</div>answered Nov 23 '18 at 15:38
Krishna JonnalagaddaKrishna Jonnalagadda
1,4421720
add a comment |
0
0
0
You have given id to input type text div and you are trying address label
$('#address-checked').change(function(){
if ($(this).is(':checked')) {
$('#address').fadeIn('slow');
$('#address-sh').fadeOut('slow');
} else {
$('#address').fadeOut('slow');
$('#address-sh').fadeIn('slow');
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="address-checked" checked="checked">
<label class="car-list-step-equipment-label">Use profile address</label>
<address id="address">
9 Longacre Road<br />
London, GB, E17 4DT
</address>
<div id="address-sh" style="display:none;">
<input type="text" />
</div>answered Nov 23 '18 at 15:38
Krishna JonnalagaddaKrishna Jonnalagadda
1,4421720
You have given id to input type text div and you are trying address label
$('#address-checked').change(function(){
if ($(this).is(':checked')) {
$('#address').fadeIn('slow');
$('#address-sh').fadeOut('slow');
} else {
$('#address').fadeOut('slow');
$('#address-sh').fadeIn('slow');
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="address-checked" checked="checked">
<label class="car-list-step-equipment-label">Use profile address</label>
<address id="address">
9 Longacre Road<br />
London, GB, E17 4DT
</address>
<div id="address-sh" style="display:none;">
<input type="text" />
</div>$('#address-checked').change(function(){
if ($(this).is(':checked')) {
$('#address').fadeIn('slow');
$('#address-sh').fadeOut('slow');
} else {
$('#address').fadeOut('slow');
$('#address-sh').fadeIn('slow');
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="address-checked" checked="checked">
<label class="car-list-step-equipment-label">Use profile address</label>
<address id="address">
9 Longacre Road<br />
London, GB, E17 4DT
</address>
<div id="address-sh" style="display:none;">
<input type="text" />
</div>$('#address-checked').change(function(){
if ($(this).is(':checked')) {
$('#address').fadeIn('slow');
$('#address-sh').fadeOut('slow');
} else {
$('#address').fadeOut('slow');
$('#address-sh').fadeIn('slow');
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="address-checked" checked="checked">
<label class="car-list-step-equipment-label">Use profile address</label>
<address id="address">
9 Longacre Road<br />
London, GB, E17 4DT
</address>
<div id="address-sh" style="display:none;">
<input type="text" />
</div>answered Nov 23 '18 at 15:38
Krishna JonnalagaddaKrishna Jonnalagadda
1,4421720
edited Nov 23 '18 at 15:46
answered Nov 23 '18 at 15:38
Krishna JonnalagaddaKrishna Jonnalagadda
1,4421720
answered Nov 23 '18 at 15:38
Krishna JonnalagaddaKrishna Jonnalagadda
1,4421720
answered Nov 23 '18 at 15:38
Krishna JonnalagaddaKrishna Jonnalagadda
1,4421720
1,4421720
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53449330%2fhide-element-on-uncheck%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
I'm voting to close this question as off-topic because the code you posted works.
– rlemon
Nov 23 '18 at 15:33
@rlemon Re-read the question. The code does not do what the OP wants it to do and so it does't work.
– Scott Marcus
Nov 23 '18 at 15:52