asked on

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!

IanTh

why do you want to clear the checkbox when ANY is checked I don't see any reason for that please enlighten me lol

remorina

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

ASKER CERTIFIED SOLUTION

remorina

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

birwin

ASKER

Worked perfectly. Thanks