I have a checkbox that needs to be checked for the user to get a button to proceed.
When checked the button appears, but when unchecked the button stays there.
$(document).ready(function () {
function calculateDisplay(){
$(":checkbox:checked").each(function(){
var display = 1;
});
$(':checkbox:not(:checked)').each(function(){
var display = 0;
});
if (display = 1) {
document.getElementById("submit").style.display="inline";
} else {
document.getElementById("submit").style.display="none";
}
}
$("#white").change(function () {
calculateDisplay()
});
});
<input type="checkbox" name="Colour" value="White" id="white" />
Ok no worries, trimmed it a little and got this working below
$(document).ready(function () {
$(":checkbox").change(function(){
if($(this).is(':checked')) document.getElementById("submit").style.display="inline";
else document.getElementById("submit").style.display="none";
});
});
Hi,
I would just point out that if you are including jQuery, you might as well use it.
$(document).ready(function () {
$(":checkbox").change(function(){
if($(this).is(':checked')) document.getElementById("submit").style.display="inline";
else document.getElementById("submit").style.display="none";
});
});
can become:
$(":checkbox").change(function(){
if($(this).is(':checked')){
$("#submit").show();
} else {
$("#submit").hide();
}
});
I would also use curly braces for if / else statements as it makes debugging easier and avoids potential confusion if another developer has to work with your code.
And, you can very, very probably do away with the $(document).ready() if you place your JavaScript in the correct place.
if (display = 1) {
Beware this common Javascript mistake. You were hoping to see IF display was 1, but instead you said “display IS 1”. Which means it’s always true isn’t it : )