Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

(Un)Checking checkbox when another checkbox gets checked

Status
Not open for further replies.

EagleM

Programmer
Jan 17, 2007
31
US
I have a search form that lets the user search for the specific features that he checks, or displays all products if the "Any" checkbox is checked. What I need Javascript to do is, to uncheck the "Any" checkbox, if the user checks any of features checkboxes. And also the other way around, if the user checks the "Any" checkbox, it should automatically uncheck all the other features checkboxes.

Basically, when the user checks one checkbox, another should get unchecked (like with radio buttons).

It should be simple, but what I've tried so far did absolutely nothing, except for raising my blood pressure.

Here is the source of my form:
Code:
<form method="get" name="searchForm" action="/mysite/admin.php">
<table class="smallcell" align="center" bgcolor="#ffffcc" border="0">
 <tbody><tr>    
     <td>Features:</td>
    <td><input checked="checked" name="any" onclick="uncheck()" type="checkbox">Any &nbsp;

                <input name="features[]" value="1" type="checkbox">Flip phone &nbsp; 
                    <input name="features[]" value="2" type="checkbox">Bluetooth &nbsp; 
                    <input name="features[]" value="3" type="checkbox">Color screen &nbsp; 
                    <input name="features[]" value="4" type="checkbox">GSM &nbsp; 
        </td>    
 </tr>
 
this should work...

Code:
<form method="get" name="searchForm" action="/mysite/admin.php">

<script>
function CheckUncheck(name){
	if (name == 'any1'){		
		for (i=0; i<document.searchForm.features.length; i++){
		document.searchForm.features[i].checked=false;
		}
		for (i=0; i<document.searchForm.any1.length; i++){
		document.searchForm.any1[i].checked=true;
		}
	} else {
		for (i=0; i<document.searchForm.any1.length; i++){
		document.searchForm.any1[i].checked=false;
		}
	}
}
</script>

<table class="smallcell" align="center" bgcolor="#ffffcc" border="0">
 <tbody><tr>    
     <td>Features:</td>
    <td>    
    				<input onclick="CheckUncheck('any1');" name="any1" value=""  type="checkbox" disabled="true" style="display:none;"><input onclick="CheckUncheck('any1');" name="any1" value="1" type="checkbox" checked>Any &nbsp;

                	<input onclick="CheckUncheck('features');" name="features" value="1" type="checkbox">Flip phone &nbsp; 
                    <input onclick="CheckUncheck('features');" name="features" value="2" type="checkbox">Bluetooth &nbsp; 
                    <input onclick="CheckUncheck('features');" name="features" value="3" type="checkbox">Color screen &nbsp; 
                    <input onclick="CheckUncheck('features');" name="features" value="4" type="checkbox">GSM &nbsp; 
        </td>    
 </tr>
 
Thank you! It does work, but I still don't understand how.

What does this accomplish?
Code:
<input onclick="CheckUncheck('any1');" name="any1" value=""  type="checkbox" disabled="true" style="display:none;">

And why are you making 'any1' into an array?

:confused:
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top