Uncheck all checkboxes on a page when any other checkbox is checked

I am looking for some jQuery code to clear all checkboxes on a page when any other box is checked.

Basically I am looking for "radio" performance for some legacy code, but using "radio" won't work, since the checkbox names are arrays, and therefore unique. The "name" is prod[someAlpha] There are potentially 30 to 40 on a page at a time, but from hundreds of potential product names.

The inputs already have a class and an ID, but I believe I could use a common rel value to identify them.

I have some code that unchecks all when a particular checkbox is checked, but I need it to uncheck all when ANY checkbox is checked.

I'd prefer a jQuery solution, since I'd rather not have to add code to my input statements, but if that is the only option, I am open to other methods.

I'd appreciate your help!
LVL 6
birwinAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

IanThCommented:
why do you want to clear the checkbox when ANY is checked I don't see any reason for that please enlighten me lol
0
remorinaCommented:
I have made a similar example for another question which I attached below which can be customised to execute on the checkbox click instead of the div.

it's simply the concept, of course it can simply be changed into a jquery script that wouldn't require id or passing onclick event, etc.. but I just don't have the time to make this example.

If I had sometime later I'll try to mock-it up using jquery and attach it for you

Cheers
<html> 
<head> 
<title>Scrolling Checkboxes</title> 
<style type="text/css"> 
    body {font:normal 12px Arial, Helvetica, Serif;} 
    .boxlist {overflow:auto;width:130px;height:75px;border:1px solid #336699;padding:0px;white-space:nowrap;overflow-x:hidden;} 
    .boxlist input {margin:0 0px 0 0;height:14px;width:17px;}
    .selectelement {background:#fff;cursor:pointer;}
    .selectedelement {background:#c0c0c0;cursor:pointer;}
</style>
<script type="text/javascript">
        function selectThis(el,cls) {
            mainboxID=el.parentNode.id;
            mainbox= document.getElementById(mainboxID);
            listElements = mainbox.getElementsByTagName("div");
            for (i=0;i<listElements.length;i++)
            {
                listElements[i].className="selectelement";
                listElements[i].firstChild.checked=false;
                
            }
            el.className="selectedelement"
            document.getElementById(cls).checked=true;
        }
    </script>
</head> 
<body> 
<div class="boxlist" id="abc" style="width:100%"> 
<div class="selectelement" onclick="selectThis(this, 'chk1');"><input type="checkbox" id="chk1">PHP</div>
<div class="selectelement" onclick="selectThis(this, 'chk2');"><input id="chk2" type="checkbox">LINUX</div>
<div class="selectelement" onclick="selectThis(this, 'chk3');"><input id="chk3" type="checkbox">APACHE</div> 
<div class="selectelement" onclick="selectThis(this, 'chk4');"><input id="chk4" type="checkbox">MYSQL</div> 
<div class="selectelement" onclick="selectThis(this, 'chk5');"><input id="chk5" type="checkbox">SQLITE</div> 
<div class="selectelement" onclick="selectThis(this, 'chk6');"><input id="chk6" type="checkbox">A Much Longer Line</div>
</div> 
 
</body> 
</html>

Open in new window

0
remorinaCommented:
Try the below code, it's a very simple JQuery to uncheck all checkboxes inside a given div when any is checked

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html>
<head>
    <title>checkboxes test</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
          $('.chkbox').click(function() {
              $("INPUT[type='checkbox']").attr('checked', $('.formexample').is(':checked'));
              this.checked="true"
            });
        });
</script>
</head>
<body>
    <div class="formexample" style="width:100%"> 
        <ul>
            <li><input type="checkbox" class="chkbox">Example 1</li>
            <li><input type="checkbox" class="chkbox">Example 2</li>
            <li><input type="checkbox" class="chkbox">Example 3</li>
            <li><input type="checkbox" class="chkbox">Example 4</li>
            <li><input type="checkbox" class="chkbox">Example 5</li>
        </ul>
    </div> 
</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
birwinAuthor Commented:
Worked perfectly. Thanks
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.