Using JavaScript to manipulate HTML input (checkbox) elements via type instead of name.

Question

I am implementing an HTML form with some checkbox input elements, and I want to have a Select All or DeSelect All button. However, I do not want to rely on the name of the input element (like this example) but rather the type because I have multiple checkbox groups with different names. Is there a way to check and uncheck all checkbox input elements within a form with JavaScript by relying on the type instead of the name?

Edit: We rely on YUI libraries, so I have access YUI if that provides a solution.

Answer 1

If jQuery is an option you can do this rather easily.

See the documentation on jQuery selectors. (The last example in the section shows how to do it with radio buttons but just replace that with check boxes.)

Answer 2

iterate through the form.elements collection and check .type == "checkbox".

var button = getSelectAllButtonInFormSomeHow();
/*all formelements have a reference to the form. And the form has an elements-collection.*/
var elements = button.form.elements;

for(var i = 0; i < elements.length;i++) {
    var input = elements[i];
    if (input.tagName == "input" && input.type == "checkbox") input.checked = true;
}

Answer 3

function findCheckBoxes(el, check) {
        for(var i=0;el.childNodes[i];i++)
        {
            var child = el.childNodes[i];
            if (child.type=="checkbox")
            {
                child.checked = check;
            }
            if (child.childNodes.length > 0)
                this.findCheckBoxes(child, check);
        }
    }

Answer 4

This should do it:

<script>
function checkUncheck(form, setTo) {
    var c = document.getElementById(form).getElementsByTagName('input');
    for (var i = 0; i < c.length; i++) {
        if (c[i].type == 'checkbox') {
            c[i].checked = setTo;
        }
    }
}
</script>

<form id='myForm'>
<input type='checkbox' name='test' value='1'><br>
<input type='checkbox' name='test' value='1'><br>
<input type='checkbox' name='test' value='1'><br>
<input type='checkbox' name='test' value='1'><br>
<input type='checkbox' name='test' value='1'><br>
<input type='button' onclick="checkUncheck('myForm', true);" value='Check'>
<input type='button' onclick="checkUncheck('myForm', false);" value='Uncheck'>
</form>

Answer 5

Every input element has an attribute, type, which for checkboxes is "checkbox" so you could try something like this: for (var i = 0; i < document.myForm.elements.length; i++) { if (document.myForm.elements[i].type == "checkbox") { document.myForm.elements[i].checked = true; } }

Answer 6

Is assigning a class to all required checkbox elements an option? If yes, then this is how I would do it (assuming "class_name" is the name of the css class present in all checkbox elements in question):

function selectCheckBoxes(bChecked) {
   var aCheckBoxes = YAHOO.util.Dom.getElementsByClassName('class_name', 'input');
   for (var i = 0; i < aCheckBoxes.length; i++) {
      aCheckBoxes[i].checked = bChecked;
   }
}

If you want to stay away from classes, but can get parent element by ID (or any other method, I will use ID in the example, though), than you can do this:

function selectCheckBoxes(bChecked) {
   var oParent = document.getElementById('parentsID');
   var aElements = oParent.getElementsByTagName('input');
   for (var i = 0; i < aElements.length; i++) {
      if (aElements[i].type == 'checkbox') {
         aElements[i].checked = bChecked;
      }
   }
}

I would stick to the "class" method, however.