SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    915
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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.

    Code:
    $(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" />

  2. #2
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    915
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok no worries, trimmed it a little and got this working below

    Code:
    $(document).ready(function () {
    $(":checkbox").change(function(){
    if($(this).is(':checked')) document.getElementById("submit").style.display="inline";
    else document.getElementById("submit").style.display="none";
    });
    });
    Last edited by Pullo; Jun 16, 2014 at 01:10. Reason: Added code tags

  3. #3
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,056
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    I would just point out that if you are including jQuery, you might as well use it.

    Code:
    $(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:

    Code:
    $(":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.

  4. #4
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Code:
    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 : )


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •