I have a page that displays all the users waiting to be approved or declined. so i would like a link that would allow me to Approve All and check all the approved boxs or Decline All boxes link
thanks in advance
Printable View
I have a page that displays all the users waiting to be approved or declined. so i would like a link that would allow me to Approve All and check all the approved boxs or Decline All boxes link
thanks in advance
Well, there's a simple answer, but the code for it would be kinda long.
That works, as is.Code:<html>
<body>
<a href="#" onClick="document.forms.form.checkbox.checked=1;">on</a>
<a href="#" onClick="document.forms.form.checkbox.checked=0;">off</a>
<form id="form">
<input type="checkbox" id="checkbox">
</form>
</body>
</html>
However, adding each of the checkboxes to an onclick statement would be a bit much. So you may want to setup a function which lists each at the top of the page and just call that from onclick.
Also, this doesn't search out checkboxes and make them all checked. I'm not sure if there is a way to do that. There may be, though.
OK boss, got you covered:
You need to do a couple things to get this to work. First, in your head section, you need these JavaScript functions:
function checkAll()
{
var boxes = cBoxes.getElementsByTagName("input");
for (var i = 0; i < boxes.length; i++) {
myType = boxes[i].getAttribute("type");
if ( myType == "checkbox") {
boxes[i].checked=1;
}
}
}
function checkNone()
{
var boxes = cBoxes.getElementsByTagName("input");
for (var i = 0; i < boxes.length; i++) {
myType = boxes[i].getAttribute("type");
if ( myType == "checkbox") {
boxes[i].checked=0;
}
}
}
Then you need to enclose all the checkboxes in a div with id "cBoxes". If you choose another div id name, you need to replace cBoxes in the two functions above. (You could make the function take the div name as an argument, but for your purpose I think this is better).
Example:
<div id="cBoxes">
// checkbox html
</div>
Then you make links that say check all and check none, and for their onclick events you call those functions. Examples:
<a href="#" onClick=" return checkAll();">Check All</a>
<a href="#" onClick=" return checkNone();">Check None</a>
Thats all. Enjoy, and let me know if you have any problems.
There ya go. Ignore my post... that's much better information.
Not entirely. There are several potential improvements.Quote:
Originally Posted by djr33
First, the code itself:
Better yet, if a group of checkboxes are to be controlled together, they are probably related in some way, and if they are, each one should share the same name - the value attribute distinguishes one from another. If this is feasible, then one can achieve better support by avoiding the getElementById and getElementsByTagName methods:Code:function checkAll() {
var container;
if (document.getElementById && (container = document.getElementById('cBoxes'))
&& container.getElementsByTagName) {
var controls = container.getElementsByTagName('input');
for (var i = 0, n = controls.length; i < n; ++i)
if (controls[i].type == 'checkbox') boxes[i].checked = true;
}
}
function checkNone() {
var container;
if (document.getElementById && (container = document.getElementById('cBoxes'))
&& container.getElementsByTagName) {
var controls = container.getElementsByTagName('input');
for (var i = 0, n = controls.length; i < n; ++i)
if (controls[i].type == 'checkbox') boxes[i].checked = false;
}
}
replacing FORM_NAME and GROUP_NAME with the relevant identifiers. Checking all of the controls would be achieved by passing true, otherwise false.Code:function setAll(checked) {
var group = document.forms.FORM_NAME.elements.GROUP_NAME;
for (var i = 0, n = group.length; i < n; ++i)
group[i].checked = checked;
}
Mike