/    Sign up×
Community /Pin to ProfileBookmark

"check all" checkbox problem

Copy linkTweet thisAlerts:
Jan 04.2007

Found this script that does a “check all” function, but it has a problem. It works fine until I add a “submit” button to the form field. That breaks it–instead of checking all, it unchecks the “check all” checkbox itself as soon as you click on it, as well as any other checkboxes in the field. Here’s the script:

function Checkall(form){
for (var i = 1; i < form.elements.length; i++){

eval(“form.elements[” + i + “].checked = form.elements[0].checked”);

}
}

And here’s the call :

<input type=”checkbox” onclick=”Checkall(this.form);” />

Seems like it should be a simple thing to fix, but I’ve tried a couple of things and no luck (I’m pretty rudimentary with javascript). Any help appreciated–not much point in checking all the boxes if you can’t submit the results!

to post a comment
JavaScript

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@OverstatementJan 04.2007 — That is a terrible terrible script. I know you didn't write it but has anyone here published a Javascript script before you fully understand it? Who does this?

Anyway, I'm surprised that works. eval (where there shouldn't be an eval) is done in the global scope so it shouldn't have access to 'form'. And there is no guarantee that element[0] will be the 'check all' box. That's probably your problem, maybe your sumbit button is element zero which is unchecked which unchecks the rest of your boxes. But I have no idea how elements in that array are ordered.
Copy linkTweet thisAlerts:
@toicontienJan 04.2007 — This is a bit more complex, but does a more complete job and is more flexible:
<i>
</i>
/**
* Check marks all the check boxes in a form
* @param object chk HTML node reference to the checkbox that got clicked
* @return void
*/
function checkAll(chk){
var form = chk.form;
for (var i=0, end=form.elements.length; i&lt;end; i++){
if (isCheckbox(form.elements[i])) {
form.elements[i].checked = chk.checked;
}
}
}


/**
* Tests an HTML node reference to see if it is a check box
* @param object el HTML node reference to test
* @return boolean True if it is a checkbox, false otherwise
*/
function isCheckbox(el) {
return (el.nodeName === 'INPUT' &amp;&amp; el.type === 'checkbox');
}


Then the event handler for a check box can be simplified to:
[code=html]<input type="checkbox" onclick="checkAll(this);">[/code]
This function will only apply the .checked property to FORM controls that are check boxes. It will skip textareas, text input fields, file input fields, form buttons and radio buttons.
Copy linkTweet thisAlerts:
@duke_okcJan 04.2007 — I would do it like this:

[CODE]<html>

<head>

<title>Check All Form</title>
<SCRIPT LANGUAGE="JavaScript">

var the_inputs=document.getElementsByTagName("input");


function Checkall() {
for (var j = 0; j < the_inputs.length; j++) {
if(the_inputs[j].type=="checkbox"){
if (the_inputs[j].checked == false) the_inputs[j].checked = true;
}
}
}

function UnCheckall() {
for (var j = 0; j < the_inputs.length; j++) {
if(the_inputs[j].type=="checkbox"){
if (the_inputs[j].checked == true) the_inputs[j].checked = false;
}
}
}
</SCRIPT>
</head>
<body bgcolor="#FBFDFF">

<FORM >
<input type=checkbox name=C1 >C1<br>
<input type=checkbox name=C2 >C2<br>
<input type=checkbox name=C3 >C3<br>
<input type=checkbox name=C4 >C4<br>
<input type=checkbox name=C5 >C5<br>
<input type=checkbox name=C6 >C6<br>
<input type=checkbox name=C7 >C7<br>
<input type=checkbox name=C8 >C8<br>
<input type=checkbox name=C9 >C9<br>
<input type=checkbox name=C10 >C10<br>
<input type=checkbox name=C11 >C11<br>
<input type=checkbox name=C12 >C12<br>
<input type=checkbox name=C13 >C13<br>
<input type=checkbox name=C14 >C14<br>

<input type="checkbox" onclick="Checkall(this.form);"/>
<a href="" onClick="Checkall(this.form);;return false">Check All Boxes.</a><br>

<input type="checkbox" onclick="UnCheckall(this.form);" />
<a href="" onClick="UnCheckall(this.form);;return false">Uncheck All Boxes.</a><br>

</FORM>

</body>

</html>[/CODE]
×

Success!

Help @DrBB 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.5,
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: @Yussuf4331,
tipped: article
amount: 1000 SATS,

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

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