INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

Checkboxes

How do I create multiple exclusive checkbox groups? by 1Oracle
Posted: 27 Feb 08

Add a "grouping" attribute to the checkboxes you want to behave as a group.  Although the attribute won't be a valid attribute of the element "input", the browser should allow it.

Here is a function and html that works.  Note the "groupKey" attribute that brings checkboxes together:

<html>
<head>
    <title>Mutual Exclusive Checkboxes</title>
    <script type="text/javascript">
        function swapCheck(checkBox)
        {
            if (checkBox)
            {
                var oInputs = document.getElementsByTagName('input');
                var ckb;
                var group = checkBox.groupKey;
                for (var i = 0; i < oInputs.length; i++)
                {
                    if (oInputs[i].type == 'checkbox')
                    {
                        ckb = oInputs[i];
                        if (ckb.groupKey && ckb.groupKey == group)
                        {
                            if (ckb.id != checkBox.id)
                            {
                                ckb.checked = false;
                            }
                        }
                    }
                }
            }
        }
    </script>
</head>
<body>
    <form id="Form1" method="post" action="">
        <div>
            Colors<br />
            <input type="checkbox" id="Checkbox1" onclick="swapCheck(this);" groupKey="Colors" title="Red" value="red" />Red<br />
            <input type="checkbox" id="Checkbox2" onclick="swapCheck(this);" groupKey="Colors" title="Yellow" value="yellow" />Yellow<br />
            <input type="checkbox" id="Checkbox3" onclick="swapCheck(this);" groupKey="Colors" title="Blue" value="blue" />Blue<br />
            <input type="checkbox" id="Checkbox4" onclick="swapCheck(this);" groupKey="Colors" title="Violet" value="violet" />Violet<br />
            <input type="checkbox" id="Checkbox5" onclick="swapCheck(this);" groupKey="Colors" title="Orange" value="orange" />Orange<br />
        </div>
        <div>
            Fruits<br />
            <input type="checkbox" id="Checkbox6" onclick="swapCheck(this);" groupKey="Fruits" title="Apple" value="apple" />Apple<br />
            <input type="checkbox" id="Checkbox7" onclick="swapCheck(this);" groupKey="Fruits" title="Banana" value="banana" />Banana<br />
            <input type="checkbox" id="Checkbox8" onclick="swapCheck(this);" groupKey="Fruits" title="Blueberry" value="blueberry" />Blueberry<br />
            <input type="checkbox" id="Checkbox9" onclick="swapCheck(this);" groupKey="Fruits" title="Grape" value="grape" />Grape<br />
            <input type="checkbox" id="Checkbox10" onclick="swapCheck(this);" groupKey="Fruits" title="Orange" value="orange" />Orange<br />
        </div>
    </form>
</body>
</html>

Back to Javascript FAQ Index
Back to Javascript Forum

My Archive

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close