/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] checkboxes to check/uncheck all

I spent some time last week looking through several JavaScript code sources to find some code that would allow me to do the “check/uncheck” all thing from another checkbox. What I pieced together works here, but I wanted to verify that this is the best way to code this.

Here’s my simple list of checkboxes:

<form action=”check_all_test.html” method=”post” name=”listingform” id=”listingform”>

<input type=”checkbox” name=”check_all_top” onClick=”checkAllSwitchTop()” /><br />
<input type=”checkbox” name=”manage[]” value=”3″ /><br />
<input type=”checkbox” name=”manage[]” value=”1″ /><br />
<input type=”checkbox” name=”manage[]” value=”2″ /><br />
<input type=”checkbox” name=”check_all_bottom” onClick=”checkAllSwitchBottom()” />

</form>

And here’s my JavaScript in the header of the page:

<script language=”JavaScript” src=”” type=”text/javascript”>
function checkAllSwitchTop() {
var checkVal = false;
if(document.listingform.check_all_top.checked == true) {
checkVal = true;
}
count = document.listingform.elements.length;
for (i=0; i < count; i++) {
document.listingform.elements[i].checked = checkVal;
}
}
function checkAllSwitchBottom() {
var checkVal = false;
if(document.listingform.check_all_bottom.checked == true) {
checkVal = true;
}
count = document.listingform.elements.length;
for (i=0; i < count; i++) {
document.listingform.elements[i].checked = checkVal;
}
}
</script>

So my questions are…

1) Is there a way to do this w/ ONE function? I want to have a working check/uncheck all box at the top AND the bottom of my list.
2) Is there also a way to specify that I only wan to check/uncheck all the checkboxes w/ the name=”manage[]”?

Thanks,

Shaun

to post a comment
JavaScript

3 Comments(s)

Copy linkTweet thisAlerts:
@javaNoobieNov 05.2004 — Use document.getElementsByName('<nameHere>') to group them together. Next loop through the collection and do what you want to do.
Copy linkTweet thisAlerts:
@scragarNov 05.2004 — to just have one function you'll need to identifie the check box that's used, this however is quite easy:

Note the presence of "checkAll(this)", the code passes a refence to the apropriate check box into your function a slight modification to the function then allows it to tell if the checkbox is ticked or not.

<i>
</i>&lt;form action="check_all_test.html" method="post" name="listingform" id="listingform"&gt;
&lt;input type="checkbox" name="check_all_top" onClick="checkAll(this)" /&gt;&lt;br /&gt;
&lt;input type="checkbox" name="manageA" value="3" /&gt;&lt;br /&gt;
&lt;input type="checkbox" name="manageB" value="1" /&gt;&lt;br /&gt;
&lt;input type="checkbox" name="manageC" value="2" /&gt;&lt;br /&gt;
&lt;input type="checkbox" name="check_all_bottom" onClick="checkAll(this)" /&gt;

&lt;/form&gt;

&lt;script language="JavaScript" type="text/javascript"&gt;
function checkAll(obj) {
var checkVal = obj.checked;
count = document.listingform.elements.length;
for (i=0; i &lt; count; i++) {
if(document.listingform.elements[i].name.indexOf("manage") == 0){
document.listingform.elements[i].checked = checkVal;
};
};
};
&lt;/script&gt;
Copy linkTweet thisAlerts:
@Warren86Nov 05.2004 — <HTML>

<Head>

<Script language=JavaScript>

function getCousins(isBox){

set = document.getElementsByName(isBox.name);
isState = isBox.checked;
for (i=0; i<set.length; i++)
{
set[i].checked = isState;
}
}


</Script>

</Head>

<Body>

<Div>Group 1 <br>

<input type=checkbox name=set1 onClick="getCousins(this)"> 1 <br>

<input type=checkbox name=set3 onClick="getCousins(this)"> 2 <br>

<input type=checkbox name=set2 onClick="getCousins(this)"> 3

</Div><br>

<Div>Group 2 <br>

<input type=checkbox name=set3 onClick="getCousins(this)"> 4 <br>

<input type=checkbox name=set1 onClick="getCousins(this)"> 5 <br>

<input type=checkbox name=set2 onClick="getCousins(this)"> 6

</Div><br>

<Div>Group 3 <br>

<input type=checkbox name=set2 onClick="getCousins(this)"> 7 <br>

<input type=checkbox name=set1 onClick="getCousins(this)"> 8 <br>

<input type=checkbox name=set3 onClick="getCousins(this)"> 9

</Div>

</Body>

</HTML>
×

Success!

Help @perpetualshaun 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.21,
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,
)...