/    Sign up×
Community /Pin to ProfileBookmark

Using checkbox to mark a set of check boxes

The following code allows me to mark a set of several other checkboxes by checking just one.

<script language=”javascript”>
var i

function checkBoxes() {
if (checkTheBoxes.checkAll.checked == true) {
for (i=0; i < checkTheBoxes.CampSite.length; i++) {
document.checkTheBoxes.CampSite[i].checked = true;
}
}
if (checkTheBoxes.checkAll.checked == false) {
for (i=0; i < checkTheBoxes.CampSite.length; i++) {
document.checkTheBoxes.CampSite[i].checked = false;
}
}
}

</script>

However, to accomplish this, the other campsites must all be named CampSite. Is there a way to modify the above so I can name the checkboxes say, CampSite1, Campsite2, ect. and then still mark all the checkboxes that begin with CampSite by checking one single “Select All” box?

to post a comment
JavaScript

1 Comments(s)

Copy linkTweet thisAlerts:
@FangMay 14.2004 — &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;title&gt;Check ckeckboxes&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
&lt;script type="text/javascript"&gt;
//&lt;![CDATA[
&lt;!--
function CheckAll(obj) {
var oAllBoxes=document.getElementById('checkTheBoxes').getElementsByTagName('input');
for(var i=0; i&lt;oAllBoxes.length; i++) {
if(oAllBoxes[i].getAttribute('type')=="checkbox" &amp;&amp; !oAllBoxes[i].getAttribute('name').indexOf('CampSite')) {
if(obj.checked) {
oAllBoxes[i].checked=true;
}
else {
oAllBoxes[i].checked=false;
}
}
}
}
//--&gt;
//]]&gt;
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;form action="#" name="checkTheBoxes" id="checkTheBoxes"&gt;
CampSite1&lt;input type="checkbox" name="CampSite1" /&gt;&lt;br /&gt;
CampSite2&lt;input type="checkbox" name="CampSite2" /&gt;&lt;br /&gt;
CampSite3&lt;input type="checkbox" name="CampSite3" /&gt;&lt;br /&gt;
DumpSite4&lt;input type="checkbox" name="DumpSite4" /&gt;&lt;br /&gt;
CampSite5&lt;input type="checkbox" name="CampSite5" /&gt;&lt;br /&gt;
Check/Uncheck AllCampSites&lt;input type="checkbox" name="CheckAllBoxes" onclick="CheckAll(this);" /&gt;&lt;br /&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
×

Success!

Help @betheball 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 6.16,
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: @nearjob,
tipped: article
amount: 1000 SATS,

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

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...