/    Sign up×
Community /Pin to ProfileBookmark

checkbox – check/uncheck All

Copy linkTweet thisAlerts:
Jan 03.2003

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.

to post a comment
JavaScript

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@dotnetanimalJan 03.2003 — 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"
}
}
Copy linkTweet thisAlerts:
@Zach_ElfersJan 03.2003 — 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;

}
Copy linkTweet thisAlerts:
@jeffmottJan 03.2003 — [i]Zach Elfers[/i]

[b]You don't need to have two functions to do this[/b][/quote]

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)
Copy linkTweet thisAlerts:
@asolellauthorJan 03.2003 — 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>
Copy linkTweet thisAlerts:
@asolellauthorJan 04.2003 — 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.
Copy linkTweet thisAlerts:
@asolellauthorJan 04.2003 — 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.
×

Success!

Help @asolell spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.27,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...