PDA

Click to See Complete Forum and Search --> : checkbox - check/uncheck All

asolell
01-02-2003, 07:52 PM
Hi all,

I want to have a check/uncheck All checkbox for 10 checkboxes named ca1,. ca2,.. ca3 ..etc.

function checkAll() {
for (var j = 0; j <= 9; j++) {
box = eval("document.input.CarMaker" + j);
if (box.checked == false) box.checked = true;
}
}

function uncheckAll() {
for (var j = 0; j <= 9; j++) {
box = eval("document.input.CarMaker" + j);
if (box.checked == true) box.checked = false;
}
}


How do call these functions from a checkbox?
I now have two buttons that use: onClick="checkAll()"
and onClick="uncheckAll()" events.
I want to do away with the buttons and just use a single checkbox that toggle between the CheckedAll and UncheckAll, but I don't know how to do this.
Your help is much appreciated.

Thanks,

-Alon.
dotnetanimal
01-02-2003, 07:58 PM
I just did this last week using an XML document with select all and needed the functionality to be able to select just one. I am doing it with XML but I hope this helps your case.

:)



function selectReport(rptID)
{
var oReportXML;
var oNodes;
var rptID;


//m_lastSel = !m_lastSel;
oReportXML = document.all("xmlAvailableReport").XMLDocument;
//alert(oReportXML.xml);
if (oReportXML)
{
oNodes = oReportXML.selectSingleNode('//rpts/type/rpt[@id="' + rptID + '"]');

if( document.all("chk" + rptID).checked )

{
//alert("hi!");
oNodes.attributes.getNamedItem("sel").nodeValue = 1;
//document.all("chk" + rptID).checked = true;
}
else
{
oNodes.attributes.getNamedItem("sel").nodeValue = 0;
//document.all("chk" + rptID).checked = false;
}
}
}


function selectReports()
{
var oReportXML;
var oNodes;
var rptID;
var i;

m_lastSel = !m_lastSel;
oReportXML = document.all("xmlAvailableReport").XMLDocument;
//alert(oReportXML.xml);
if (oReportXML)
{
oNodes = oReportXML.selectNodes('//reportList/rpts/type/rpt');

for (i = 0; i < oNodes.length; i++)
{
rptID = oNodes[i].attributes.getNamedItem("id").nodeValue
if(m_lastSel)
{
oNodes[i].attributes.getNamedItem("sel").nodeValue = 1;
document.all("chk" + rptID).checked = true;
}
else
{
oNodes[i].attributes.getNamedItem("sel").nodeValue = 0;
document.all("chk" + rptID).checked = false;
}
}
}
if (m_lastSel)
{
document.all("imgCheck").title = "Uncheck All Templates"
window.status = "Uncheck All"
}
else
{
document.all("imgCheck").title = "Check All Templates"
window.status = "Check All"
}
}
Zach Elfers
01-02-2003, 08:24 PM
You don't need to have two functions to do this. You could do it this way:

function checkUncheck() {
radioButtons = new Array(button1, button2, button3) {
for (i = 0; i <= radioButtons.length(); i++) {
if (document.formName.radioButtons[i].checked == false) {
document.formName.radioButtons[i].checked == true;
}
else {
document.formName.radioButtons[i].checked == false;
}
}
return true;
}
jeffmott
01-02-2003, 09:28 PM
Zach Elfers
You don't need to have two functions to do this

It can be done with only one fuction, but not the way you described. Your example will only invert the current selection (eg, two checkboxes. the first one checked, the second not. you function will uncheck the first and check the second.)

What you could do is have another checkbox called 'checkall'. Then set the value of each checkbox in your desired group to the same value as checkall. If checkall is check, all other checkboxes become checked. If checkall is not checked, all other checkboxes become unchecked. (See Dave's example)
asolell
01-03-2003, 05:28 PM
Sorry to bug you again, but I'm still not getting it.
I've tried to put the code together as instructed, but can't seem to make anything happen.
This looks like such a simple code to implement (makes me feel really stupid).

-Alon.

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>

<SCRIPT LANGUAGE="JavaScript">
<function handleCheckBoxes(ele,opt) {
for (var j = 0; j <= 2; j++)
{
ele["CarMaker"+j].checked = opt;
return true;
}

</script>


</head>
<body>
Check All <input type="checkbox" name="optAll" onClick="return handleCheckBoxes(this.form.elements,this.checked);">
This is Car One<input type="checkbox" name="CarMaker0" value="TheFirstCar">
This is Car Two<input type="checkbox" name="CarMaker1" value="TheSecondCar">

</body>

</html>
asolell
01-03-2003, 07:23 PM
Hi Dave,

Thanks for your assistance with this.
Here is a page that I'm trying to run - just this simple code
and I still can't get to work (with the additional fix you provided for the counter to run).

http://www.malabi.com/test/ch.html

I'm getting a page scripting error (error on page on the status bar in IE6 of WinXP).

Am I missing something?

-Alon.
asolell
01-04-2003, 04:16 AM
Thank you so much!
I was missing the form tags. That was the 'missing link' :p .
The addition of the extra box is negligible as I was experimenting with various loops.
The values are acutally dynamically populated as this is integrated into a PHP page.
So again,. thanks a lot. I knew it was something silly I was missing..;-))

-Alon.