www.webdeveloper.com
Results 1 to 4 of 4

Thread: Script To Only Allow One Selection from Multiple Checkboxes

  1. #1
    Join Date
    Jan 2014
    Posts
    2

    Script To Only Allow One Selection from Multiple Checkboxes

    Hi Guys,
    Iím pretty new when it comes to JavaScript so please bear with me.

    Iím developing a simple form that consists of multiple checkboxes but I only want the user to have the ability to check just one. How would I do that? Hereís what I have so far.

    I appreciate any help anyone can give me!

    Thanks

    Code:
    <style>
    .DivVisibility {
    	display: none;
    }
    </style>
    
    <script type="text/javascript">
    <!--
        function toggle_visibility(id) {
           var e = document.getElementById(id);
           if(e.style.display == 'block')
              e.style.display = 'none';
           else
              e.style.display = 'block';
        }
    //-->
    </script>
    </head>
    
    <body>
    <form runat="server" id="step1"  name="step1" class="step1" method="post">
      <div id="DivMain">
        <div id="TableTimekeepingMethod">
          <table id="TableTimekeepingMethod">
            <tr>
              <td>Timekeeping Method</td>
            </tr>
            <tr>
              <td><input type="checkbox" id="ComputerClockInOut" name="Computer Clock In Out">
                Computer Clock In/Out</td>
            </tr>
            <tr>
              <td><input type="checkbox" id="ComputerManualTimeSheet" name="Computer Manual Time Sheet">
                Computer Manual Time Sheet</td>
            </tr>
            <tr>
              <td><table id="TablePhysicalClockandQuantity" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td><input type="checkbox" id="PhysicalClockandQuantity" name="Physical Clock and Quantity" onclick="toggle_visibility('DivClockQuantity'); toggle_visibility('DivClockType');">
                  	Physical Clock & Quantity </td>
                  <td><div id="DivClockQuantity" class="DivVisibility"><input type="textbox" id="ClockQuantity" name="Clock Quantity" value="Enter Quantity" /></div></td>
                </tr>
              </table></td>
            </tr>
          </table>
        </div>
      </div>
    </form>

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,432
    Why not change to a radio button group which is what the element was designed for?
    One selection only from a group of options.

  3. #3
    Join Date
    Jan 2014
    Posts
    2
    Quote Originally Posted by JMRKER View Post
    Why not change to a radio button group which is what the element was designed for?
    One selection only from a group of options.
    Flip, you're so right! I'll definitely go that direction.

    Thanks!

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,432

    Lightbulb

    Don't know how much difference it makes to your problem,
    but I would eliminate the <table> and use a <fieldset> tag
    to make the display a little cleaner and the code a bit shorter.

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <title> Untitled </title>
    
    <style>
    #DivMain { width:33%; }
    #ClockQuantity { display: none; }
    </style>
    
    <script type="text/javascript">
    function toggleTBox(ids) {
      var e = document.getElementById(ids);
      if (e.style.display == 'inline') { e.style.display = 'none'; }
                                  else { e.style.display = 'inline'; }
    }
    function setTBox(ids) {
      document.getElementById(ids).style.display = 'none';
    }
    </script>
    </head>
    
    <body>
    <form runat="server" id="step1"  name="step1" class="step1" method="post" onsubmit="return false">
    <fieldset id="DivMain">
     <legend>Timekeeping Method</legend>
     <label><input type="radio" name="TKmethod" onclick="setTBox('ClockQuantity')"> Computer Clock In/Out </label>
    <br>
     <label><input type="radio" name="TKmethod" onclick="setTBox('ClockQuantity')"> Computer Manual Time Sheet </label>
    <br>
     <label><input type="radio" name="TKmethod" onclick="toggleTBox('ClockQuantity')"> Physical Clock & Quantity </label>
     <input type="textbox" id="ClockQuantity" value="Enter Quantity" />
    </fieldset>
    </form>
    </body>
    </html>
    Remove or add validation for the <form> tag onsubmit() if necessary.
    Last edited by JMRKER; 01-06-2014 at 11:23 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles