Is checkbox not checked

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 : )