How to uncheked (n) checkbox by condition?

web_designer_iq

Hi,
I have a web page with the following check boxes:
for example:

Select your favorite country(ies):

U.S.A
Denmark.
Australia.
IRAQ.
Bahamas.
all.

i want to disable all countries if user checked all and enable "all" if user checked a country(ies).

for details you can see the attached images.
thanks

bpat1434

Well, you could give the country checkboxes a class name of "country" and the checkbox all a class name of "all". Then you write some JavaScript to get the checkboxes class that is opposite the chosen (all for any country, and country for the all box) and just disable it.

You might google for getElemntsByClassName function in javascript, and then look into disabling form elements.

web_designer_iq

How to build it?
you have an example?

bpat1434

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> new document </title>
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />

  <script type="text/javascript">
  function getElementsByClassName(oElm, strTagName, strClassName) {
    var arrElements = (strTagName=="*" && oElm.all)?oElm.all : oElm.getElementsByTagName(strTagName);
	var arrReturnElements = new Array();
	strClassName = strClassName.replace(/\-/g, "\\-");
	var oRegExp = new RegExp("(^|\\s)" + strClassName+"(\\s|$)");
	var oElement;
	for(var i=0; i<arrElements.length; i++) {
		oElement = arrElements[i];
		if(oRegExp.test(oElement.className)) {
			arrReturnElements.push(oElement);
		}
	}
	return (arrReturnElements);
  }


  function en_dis_able(cName) {
	var elmnts = getElementsByClassName(document, "*", cName);
	for(var i=0; i<elmnts.length; i++) {
		elmnt = elmnts[i];
		if(elmnt.disabled == false) {
			elmnt.disabled = true;
		}
	}
  }
  </script>
 </head>

 <body>

 <input type="checkbox" name="countries[]" class="country" value="USA" onclick="en_dis_able('all')"> USA<br>
 <input type="checkbox" name="countries[]" class="country" value="GB" onclick="en_dis_able('all')"> Great Britain<br>
 <input type="checkbox" name="countries[]" class="country" value="DL" onclick="en_dis_able('all')"> Germany<br>
 <input type="checkbox" name="countries[]" class="all" value="all" onclick="en_dis_able('country')"> All

 </body>
</html>

That gets the idea going... as for re-checking after they uncheck a box to re-enable it, you're on your own. But that should get you started.

web_designer_iq

Thank you very much! 🙂
but there are a problem!
i can't check all after i select "elements" and reselect ! test now.
!! 🙁

bpat1434

bpat1434 wrote:
as for re-checking after they uncheck a box to re-enable it, you're on your own.

I said that initially, I'm not sure how to do this. Perhaps someone else would be kind enough to enlighten us both.

bpat1434

Okay, took some time to try and figure this out. here's another one to try...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> Checkbox Disabler </title>
  <script language="JavaScript" type="text/javascript"><!--
  function getElementsByClassName(oElm, strTag, strClass) {
	var arrElements = (strTag == "*" && oElm.all) ? oElm.all : oElm.getElementsByTagName(strTag);
	var arrReturnElements = new Array();
	strClass = strClass.replace(/\-/g, "\\-");
	var oRegExp = new RegExp("(^|\\s)" + strClass + "(\\s|$)");
	var oElement;
	for (var i=0; i<arrElements.length; i++) {
		oElement = arrElements[i];
		if(oRegExp.test(oElement.className)) {
			arrReturnElements.push(oElement);
		}
	}

return (arrReturnElements);
  }

  function DenableBoxes(calling, strClass) {
	var set=false;
	elmnts = getElementsByClassName(document, "*", strClass);
	selmnts = getElementsByClassName(document, "*", calling.className);
	for(var k=0; k<selmnts.length; k++) {
		if(selmnts[k].checked==true) {
			set=true;
		}
	}
	for(var i=0; i<elmnts.length; i++) {
		if(calling.checked==true) {
			if(elmnts[i].disabled==false){
				elmnts[i].disabled=true;
			}
		}
		else {
			if(set==true) {
				if(elmnts[i].disabled==false) {
					elmnts[i].disabled=true;
				}
			}
			else {
				if(elmnts[i].disabled==true) {
					elmnts[i].disabled=false;
				}
			}
		}
	}
  }

  --></script>
 </head>

 <body>
  <form action="" method="post" name="countries">
	<input type="checkbox" name="country[]" class="country" value="USA" onClick="DenableBoxes(this, 'all')"> USA<br>
	<input type="checkbox" name="country[]" class="country" value="Russia" onClick="DenableBoxes(this, 'all')"> Russia<br>
	<input type="checkbox" name="country[]" class="country" value="Germany" onClick="DenableBoxes(this, 'all')"> Germany<br>
	<br>
	<input type="checkbox" name="country[]" class="all" value="all" onClick="DenableBoxes(this, 'country')"> All of above
  </form>
 </body>
</html>

[EDIT]
Okay, worked a bit more and got you I think what you wanted.

JPnyc

Seems like too much work tht way. The elements array is native to javascript.

var ckbx=document.forms[0].elements;
function disableAll() {
if(ckbx[5].checked) {
for(var i = 0; i< ckbx.length-1; i++) {
ckbx.disabled=true;
}
}
}

bpat1434

Yes, except what if you have three groups and want to disable only 1/3 of them? I.e. you have three of thesame form as to what I posted. How would you differentiate between them?

JPnyc

Then change this to"

function disableAll(f) {
var ckbx=document.forms[f].elements;

if(ckbx[5].checked) {
for(var i = 0; i< ckbx.length-1; i++) {
ckbx.disabled=true;
}
}
}

And in the call you pass the value of f like onclick="disableAll(1)" or 2 or 0

bpat1434

But how would you know when coding in HTML just what is what? Which form element is element 1 or 2 or 3.... and wouldn't form[f] be one item? isn't form[] an array filled with elements, each of which is an input?

JPnyc

The forms array is also native to JS. The 1st form on the page is referenced with forms[0], the 2nd is referenced with forms[1]. Like most programming languages, arrays are 0 based.

No, forms[f] where f is a variable, will take on whatever value you pass in the arguments of the call. So the onclick event handler contains the function call, and the value of f is passed in the arguments

bpat1434

Right, I understood that, but what if you have:

<form>
<input type="checkbox" name="country[]" value="USA">USA
<input type="checkbox" name="country[]" value="Russia">Russia
<input type="checkbox" name="country[]" value="Liberia">Liberia
<input type="checkbox" name="country[]" value="all">All Countries

<input type="checkbox" name="lang[]" value="US English">US English
<input type="checkbox" name="lang[]" value="GB English">GB English
<input type="checkbox" name="lang[]" value="Russian">Russian
<input type="checkbox" name="lang[]" value="liberian">Liberian
<input type="checkbox" name="lang[]" value="all">All Languages
</form>

How then would you differentiate between them? You can't say that form[0] would get just the country[] and form[1] would get lang[] can you? Or are you saying that each name of an input adds one to the form[] array? Or maybe you can do it with form[0]['name']? I'm just trying to wrap my head around the easier way.

JPnyc

Then you just have 2 sets of tests:

var ckbx=document.forms[0].elements;
function disableAll() {

if(ckbx[3].checked) {
for(var i = 0; i< 3; i++) {
ckbx.disabled=true;
}
if(ckbx[8].checked) {
for(i = 4; i< ckbx.length-1; i++) {
ckbx.disabled=true;
}
}
}
}

bpat1434

Hmm... it seems that while that way may be easier, it doesn't really generalize out that well. I mean, if I want to start putting 5 or 6 items grouped like that, I'd be writing a lot of JavaScript; whereas, with the function(s) I posted, it can be very generalized and can be used in any form, with any number of groups.

Not saying mine is better, because I'm sure it's very inefficient (running loops is slow), and can be improved. I wrote it thinking of going general and how it can be applied generally.

JPnyc

Well some of the responsibility is also on the HTML side. You really should have the groups in seperate form tags. Then one short function will take care of any of em.

You could still do it with the one function, even the way you have it there. You make the test (the < part) a variable also, and then pass the values of both i and x in the function call

var ckbx=document.forms[0].elements;
function disableAll(x,i) {

if(ckbx[x].checked) {
for( i< x; i++) {
ckbx.disabled=true;
}
}

and the function call would look like disableAll(3,1) for the 1st call

and disableAll(8,4) for the 2nd call