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 Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
Dynamically control checkboxes
- Thread starter ashz
- Start date
Hi ashz,
Normally you make this kind of choices with RADIOBUTTONS.
But of course you can add some javascript to do it with checkboxes. See my examples:
(1): Here is some javascript that let you make only choose one of the 3 checkboxes.
(2): Is the same with radio-buttons (but see in example 3 that this javascript is no need !!!!!)
(3) As I said in the beginning normally you do it with only radiobuttons. Just give a group RB's the same name and you can only chose one of them. Keep it simple as it can be!!
<HTML>
<HEAD>
</HEAD>
<BODY>
<script language="Javascript">
function distextbox(value)
{
var DM = document.myform ;
nrCB = DM.CB.length;
for (ia = 0; ia < nrCB; ia++)
{
if (DM.CB[ia].value == value)
{
DM.CB[ia].checked = true;
}
else
{
DM.CB[ia].checked = false;
}
}
}
function disradio(value)
{
var DM = document.myform;
nrR = DM.RB.length;
for (ia = 0; ia < nrR; ia++)
{
if (DM.RB[ia].value == value)
{
DM.RB[ia].checked = true;
}
else
{
DM.RB[ia].checked = false;
}
}
}
</script>
<form name="myform">
<input type="checkbox" name="CB" value="yes" onclick="distextbox(this.value)">yes 1<br><br>
<input type="checkbox" name="CB" value="no" onclick="distextbox(this.value)">no 1<br><br>
<input type="checkbox" name="CB" value="all" onclick="distextbox(this.value)">all 1<br>
----------------------------<br>
<input type="radio" name="RB" value="yes" onclick="disradio(this.value)">yes 2<br><br>
<input type="radio" name="RB" value="no" onclick="disradio(this.value)">no 2<br><br>
<input type="radio" name="RB" value="all" onclick="disradio(this.value)">all 2<br>
----------------------------<br>
<input type="radio" name="GGG" value="yes">yes 3<br><br>
<input type="radio" name="GGG" value="no">no 3<br><br>
<input type="radio" name="GGG" value="all">all 3<br><br>
</form>
</BODY>
</HTML>
I don't understand what you mean with deactivate
If you mean "disabled" (make it grey) then you have to make sort of reset button. See the next examples:
<HTML>
<HEAD>
</HEAD>
<BODY>
<script language="Javascript">
function distextbox(value)
{
var DM = document.myform ;
nrCB = DM.CB.length;
for (ia = 0; ia < nrCB; ia++)
{
if (DM.CB[ia].value == value)
{
DM.CB[ia].checked = true;
DM.CB[ia].disabled = false;
}
else
{
DM.CB[ia].checked = false;
DM.CB[ia].disabled = true;
}
}
}
function disradio(value)
{
var DM = document.myform;
nrR = DM.RB.length;
for (ia = 0; ia < nrR; ia++)
{
if (DM.RB[ia].value == value)
{
DM.RB[ia].checked = true;
DM.RB[ia].disabled = false;
}
else
{
DM.RB[ia].checked = false;
DM.RB[ia].disabled = true;
}
}
}
function reset1()
{
var DM = document.myform;
nrCB = DM.CB.length;
for (ia = 0; ia < nrCB; ia++)
{
DM.CB[ia].disabled = false;
}
}
function reset2()
{
var DM = document.myform;
nrR = DM.RB.length;
for (ia = 0; ia < nrR; ia++)
{
DM.RB[ia].disabled = false;
}
}
</script>
<form name="myform">
<input type="checkbox" name="CB" value="yes" onclick="distextbox(this.value)">yes 1<br><br>
<input type="checkbox" name="CB" value="no" onclick="distextbox(this.value)">no 1<br><br>
<input type="checkbox" name="CB" value="all" onclick="distextbox(this.value)">all 1<br><br>
<input type="button" value="reset 1" onclick="reset1()"><br>
----------------------------<br>
<input type="radio" name="RB" value="yes" onclick="disradio(this.value)">yes 2<br><br>
<input type="radio" name="RB" value="no" onclick="disradio(this.value)">no 2<br><br>
<input type="radio" name="RB" value="all" onclick="disradio(this.value)">all 2<br><br>
<input type="button" value="reset 2" onclick="reset2()"><br>
----------------------------<br>
<input type="radio" name="GGG" value="yes">yes 3<br><br>
<input type="radio" name="GGG" value="no">no 3<br><br>
<input type="radio" name="GGG" value="all">all 3<br><br>
</form>
</BODY>
</HTML>
Hope this helps,
Erik <-- My sport: Boomerang throwing !!
!! Many Happy Returns !! -->
Normally you make this kind of choices with RADIOBUTTONS.
But of course you can add some javascript to do it with checkboxes. See my examples:
(1): Here is some javascript that let you make only choose one of the 3 checkboxes.
(2): Is the same with radio-buttons (but see in example 3 that this javascript is no need !!!!!)
(3) As I said in the beginning normally you do it with only radiobuttons. Just give a group RB's the same name and you can only chose one of them. Keep it simple as it can be!!
<HTML>
<HEAD>
</HEAD>
<BODY>
<script language="Javascript">
function distextbox(value)
{
var DM = document.myform ;
nrCB = DM.CB.length;
for (ia = 0; ia < nrCB; ia++)
{
if (DM.CB[ia].value == value)
{
DM.CB[ia].checked = true;
}
else
{
DM.CB[ia].checked = false;
}
}
}
function disradio(value)
{
var DM = document.myform;
nrR = DM.RB.length;
for (ia = 0; ia < nrR; ia++)
{
if (DM.RB[ia].value == value)
{
DM.RB[ia].checked = true;
}
else
{
DM.RB[ia].checked = false;
}
}
}
</script>
<form name="myform">
<input type="checkbox" name="CB" value="yes" onclick="distextbox(this.value)">yes 1<br><br>
<input type="checkbox" name="CB" value="no" onclick="distextbox(this.value)">no 1<br><br>
<input type="checkbox" name="CB" value="all" onclick="distextbox(this.value)">all 1<br>
----------------------------<br>
<input type="radio" name="RB" value="yes" onclick="disradio(this.value)">yes 2<br><br>
<input type="radio" name="RB" value="no" onclick="disradio(this.value)">no 2<br><br>
<input type="radio" name="RB" value="all" onclick="disradio(this.value)">all 2<br>
----------------------------<br>
<input type="radio" name="GGG" value="yes">yes 3<br><br>
<input type="radio" name="GGG" value="no">no 3<br><br>
<input type="radio" name="GGG" value="all">all 3<br><br>
</form>
</BODY>
</HTML>
I don't understand what you mean with deactivate
If you mean "disabled" (make it grey) then you have to make sort of reset button. See the next examples:
<HTML>
<HEAD>
</HEAD>
<BODY>
<script language="Javascript">
function distextbox(value)
{
var DM = document.myform ;
nrCB = DM.CB.length;
for (ia = 0; ia < nrCB; ia++)
{
if (DM.CB[ia].value == value)
{
DM.CB[ia].checked = true;
DM.CB[ia].disabled = false;
}
else
{
DM.CB[ia].checked = false;
DM.CB[ia].disabled = true;
}
}
}
function disradio(value)
{
var DM = document.myform;
nrR = DM.RB.length;
for (ia = 0; ia < nrR; ia++)
{
if (DM.RB[ia].value == value)
{
DM.RB[ia].checked = true;
DM.RB[ia].disabled = false;
}
else
{
DM.RB[ia].checked = false;
DM.RB[ia].disabled = true;
}
}
}
function reset1()
{
var DM = document.myform;
nrCB = DM.CB.length;
for (ia = 0; ia < nrCB; ia++)
{
DM.CB[ia].disabled = false;
}
}
function reset2()
{
var DM = document.myform;
nrR = DM.RB.length;
for (ia = 0; ia < nrR; ia++)
{
DM.RB[ia].disabled = false;
}
}
</script>
<form name="myform">
<input type="checkbox" name="CB" value="yes" onclick="distextbox(this.value)">yes 1<br><br>
<input type="checkbox" name="CB" value="no" onclick="distextbox(this.value)">no 1<br><br>
<input type="checkbox" name="CB" value="all" onclick="distextbox(this.value)">all 1<br><br>
<input type="button" value="reset 1" onclick="reset1()"><br>
----------------------------<br>
<input type="radio" name="RB" value="yes" onclick="disradio(this.value)">yes 2<br><br>
<input type="radio" name="RB" value="no" onclick="disradio(this.value)">no 2<br><br>
<input type="radio" name="RB" value="all" onclick="disradio(this.value)">all 2<br><br>
<input type="button" value="reset 2" onclick="reset2()"><br>
----------------------------<br>
<input type="radio" name="GGG" value="yes">yes 3<br><br>
<input type="radio" name="GGG" value="no">no 3<br><br>
<input type="radio" name="GGG" value="all">all 3<br><br>
</form>
</BODY>
</HTML>
Hope this helps,
Erik <-- My sport: Boomerang throwing !!
!! Many Happy Returns !! -->
- Status
Similar threads
- Locked
- Question
- Locked
- Question