www.webdeveloper.com
Results 1 to 6 of 6

Thread: If a checkbox is checked the rest will be uncheck

  1. #1
    Join Date
    Jul 2006
    Posts
    26

    If a checkbox is checked the rest will be uncheck

    Hi,

    How to do this on javascript. For example I have 5 checkboxes and If a checkbox is checked the rest will be uncheck. So basically it will be like a radio button list but I need to do this on checkboxes.. Please let me know how to do this. Sample code will be greatly appreciated..

    Thanks!
    Let me know if you need a Custom Bot

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>123</title>
    <style type="text/css">
    body{text-align:center;font-family:Verdana,Arial;font-size:11px;background-color:#fff;color:#000;padding:0px;margin:15&#37; 0px 0px 0px;}
    input[type="checkbox"]{margin-left:10px;}
    label{font-weight:bold;font-style:italic;}
    </style>
    <script type="text/javascript">
    /* array for the checkboxes */
    var cbx=[];
    function init(){
    /* all INPUTS in the form */
    var inps=document.getElementById('myform').getElementsByTagName('INPUT');
    /* this loop goes through all INPUTS */
    for(var i in inps){
    /* if the current is not a checkbox, the loops skips it and goes further */
    if(inps[i].type!='checkbox'){continue;}
    else{
    /* if the current is a checkbox, it is stored in the cbx array */
    cbx.push(inps[i]);
    /* when a checkbox is clicked */
    inps[i].onclick=function(){
    /* if it was unchecked, the function does nothing */
    if(!this.checked){return;}
    /* if it was checked the function loops through the cbx array */
    else{for(var k in cbx){
    /* if the current array's member is the checkbox which has been clicked, the loops skips it */
    if(cbx[k]===this){continue;}
    /* if it is another checkbox, it is getting unchecked */
    else{cbx[k].checked=false;}
    }
    }
    }
    }
    }
    }
    
    window.onload=init;
    </script>
    </head>
    <body>
    <form name="myform" id="myform" action="">
    <label for="cb_1">Checkbox 1</label><input type="checkbox" name="cb_1" id="cb_1" /><br />
    <label for="cb_2">Checkbox 2</label><input type="checkbox" name="cb_2" id="cb_2" /><br />
    <label for="cb_3">Checkbox 3</label><input type="checkbox" name="cb_3" id="cb_3" /><br />
    <label for="cb_4">Checkbox 4</label><input type="checkbox" name="cb_4" id="cb_4" /><br />
    <label for="cb_5">Checkbox 5</label><input type="checkbox" name="cb_5" id="cb_5" />
    </form>
    </body>
    </html>
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  3. #3
    Join Date
    Jul 2006
    Posts
    26
    Thanks a lot! Exactly what i need..
    Let me know if you need a Custom Bot

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

    Lightbulb

    Alternate solution, but with a bit less logic testing...
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>123</title>
    
    <style type="text/css">
    body{
      text-align:center;font-family:Verdana,Arial;
      font-size:11px;
      background-color:#fff;
      color:#000;
      padding:0px;margin:15% 0px 0px 0px;
    }
     input[type="checkbox"]{margin-left:10px;}
     label{font-weight:bold;font-style:italic;}
    </style>
    
    <script type="text/javascript">
    function ckCBox(IDS) {
      var cBoxInfo = document.getElementById('cBoxInfo').getElementsByTagName('input');
      for (var i=0; i<cBoxInfo.length; i++) {
        cBoxInfo[i].checked = false;
      }
      document.getElementById(IDS).checked = true;
    }
    
    </script>
    </head>
    <body>
    <form name="myform" id="myform" action="" onsubmit="return false">
     <div id="cBoxInfo">
    <label for="cb_1">Checkbox 1</label><input type="checkbox" name="cb_1" id="cb_1" onclick="ckCBox(this.id)" /><br />
    <label for="cb_2">Checkbox 2</label><input type="checkbox" name="cb_2" id="cb_2" onclick="ckCBox(this.id)" /><br />
    <label for="cb_3">Checkbox 3</label><input type="checkbox" name="cb_3" id="cb_3" onclick="ckCBox(this.id)" /><br />
    <label for="cb_4">Checkbox 4</label><input type="checkbox" name="cb_4" id="cb_4" onclick="ckCBox(this.id)" /><br />
    <label for="cb_5">Checkbox 5</label><input type="checkbox" name="cb_5" id="cb_5" onclick="ckCBox(this.id)" />
     </div>
    </form>
    </body>
    </html>

  5. #5
    Join Date
    Nov 2010
    Posts
    1,085
    or (being that there will only ever be one checkbox checked at a time)...

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>123</title>
    
    <style type="text/css">
    body{
      text-align:center;font-family:Verdana,Arial;
      font-size:11px;
      background-color:#fff;
      color:#000;
      padding:0px;margin:15% 0px 0px 0px;
    }
     input[type="checkbox"]{margin-left:10px;}
     label{font-weight:bold;font-style:italic;}
    </style>
    
    
    </head>
    <body>
    <form name="myform" id="myform" action="" onsubmit="return false">
     <div id="cBoxInfo">
    <label for="cb_1">Checkbox 1</label><input type="checkbox" name="cb_1" id="cb_1" /><br />
    <label for="cb_2">Checkbox 2</label><input type="checkbox" name="cb_2" id="cb_2" /><br />
    <label for="cb_3">Checkbox 3</label><input type="checkbox" name="cb_3" id="cb_3" /><br />
    <label for="cb_4">Checkbox 4</label><input type="checkbox" name="cb_4" id="cb_4" /><br />
    <label for="cb_5">Checkbox 5</label><input type="checkbox" name="cb_5" id="cb_5" />
     </div>
    </form>
    <script type="text/javascript">
    (function() {
    var chkdOne;
      var cBoxInfo = document.getElementById('cBoxInfo').getElementsByTagName('input');
      for (var i=0; i<cBoxInfo.length; i++) {
        cBoxInfo[i].onclick = function(){
    	if (chkdOne){chkdOne.checked=false}
    	chkdOne=this;
    			}
    		}
    	})();
    
    </script>
    </body>
    </html>

  6. #6
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,389

    Question

    Quote Originally Posted by mason66 View Post
    Hi,

    How to do this on javascript. For example I have 5 checkboxes and If a checkbox is checked the rest will be uncheck. So basically it will be like a radio button list but I need to do this on checkboxes.. Please let me know how to do this. Sample code will be greatly appreciated..

    Thanks!
    Now that you have several solutions,
    can you explain the benefits of this script over a set of radio buttons?

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