SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    252
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Questions about check boxes - Can you de-select other boxes by click another box?

    Good day every one!

    My question is. I have four html form check boxes.

    The user is allow to choose one or three of the check boxes, the last check box has a value of None.

    Example: What's your favorite color.
    1. Red 2.Blue 3. Green 4. Gray. 5. None.


    The user can select more then one color.

    So I'm wondering how can I make the other check boxes deselect when the user click None.

    So if the user select None, then the other boxes cannot be checked.

    Is this possible? I know you can do this with radio buttons but I would like the user to select more then one option.

    Thanks everyone.

    Patrick

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not with mere HTML, no. Checkboxes are independent.

    You can do this with JavaScript, though, so I'll move your thread to the JavaScript forum.
    Birnam wood is come to Dunsinane

  3. #3
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's a quickie - but maybe it will be helpful.

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Demo</title>
    <style type='text/css'>
    </style>
    <script type='text/javascript'>
    
    var CHK_NONE = 'chk-4';
    
    window.onload = function() {
      var f = document.getElementById('form-0');
      if (f) {
        f.onsubmit = formSubmit;
        xEachNum('chk-', 0, null,
          function (c) {
            c.onclick = chkClick;
          }
        );
      }
    };
    
    function chkClick() {
      if (this.id == CHK_NONE) {
        if (this.checked) { // user checked none
          xEachNum('chk-', 0, null,
            function (c) {
              c.checked = false;
              c.disabled = true;
            }
          );
          this.checked = true;
          this.disabled = false;
        }
        else { // user unchecked none
          xEachNum('chk-', 0, null,
            function (c) {
              c.disabled = false;
            }
          );
        }
      }
    }
    
    function formSubmit() {
      return false;
    }
    
    // http://cross-browser.com/x/lib/view.php?s=xEachNum
    function xEachNum(p,i,d,f)
    {
      var e = document.getElementById(p + i);
      while (e) {
        f(e, i, d);
        e = document.getElementById(p + (++i));
      }
    }
    </script>
    </head>
    <body>
    
    <form method="post" id="form-0" action="#">
      <p><input type="checkbox" id="chk-0" value="Red">   Red</p>
      <p><input type="checkbox" id="chk-1" value="Blue">  Blue</p>
      <p><input type="checkbox" id="chk-2" value="Green"> Green</p>
      <p><input type="checkbox" id="chk-3" value="Gray">  Gray</p>
      <p><input type="checkbox" id="chk-4" value="None">  None</p>
      <p><input type="submit"></p>
    </form>
    
    </body>
    </html>

  4. #4
    SitePoint Enthusiast Faseeh's Avatar
    Join Date
    May 2009
    Location
    I Do not have a permanent place to stay
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can do this with Javascript.
    My Websites Stone,
    Hotel, Jewelry, Hotels DIR, Web Design Websites.

  5. #5
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    252
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by MikeFoster View Post
    Here's a quickie - but maybe it will be helpful.

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Demo</title>
    <style type='text/css'>
    </style>
    <script type='text/javascript'>
    
    var CHK_NONE = 'chk-4';
    
    window.onload = function() {
      var f = document.getElementById('form-0');
      if (f) {
        f.onsubmit = formSubmit;
        xEachNum('chk-', 0, null,
          function (c) {
            c.onclick = chkClick;
          }
        );
      }
    };
    
    function chkClick() {
      if (this.id == CHK_NONE) {
        if (this.checked) { // user checked none
          xEachNum('chk-', 0, null,
            function (c) {
              c.checked = false;
              c.disabled = true;
            }
          );
          this.checked = true;
          this.disabled = false;
        }
        else { // user unchecked none
          xEachNum('chk-', 0, null,
            function (c) {
              c.disabled = false;
            }
          );
        }
      }
    }
    
    function formSubmit() {
      return false;
    }
    
    // http://cross-browser.com/x/lib/view.php?s=xEachNum
    function xEachNum(p,i,d,f)
    {
      var e = document.getElementById(p + i);
      while (e) {
        f(e, i, d);
        e = document.getElementById(p + (++i));
      }
    }
    </script>
    </head>
    <body>
    
    <form method="post" id="form-0" action="#">
      <p><input type="checkbox" id="chk-0" value="Red">   Red</p>
      <p><input type="checkbox" id="chk-1" value="Blue">  Blue</p>
      <p><input type="checkbox" id="chk-2" value="Green"> Green</p>
      <p><input type="checkbox" id="chk-3" value="Gray">  Gray</p>
      <p><input type="checkbox" id="chk-4" value="None">  None</p>
      <p><input type="submit"></p>
    </form>
    
    </body>
    </html>
    Thanks very, very much Mike!

    I actually got it working - you have been very helpful with your time.

    Thanks again!

    IC


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
  •