Использование JavaScript для управления элементами ввода HTML (флажок) с помощью типа вместо имени

Я использую HTML-форму с некоторыми элементами ввода флажка, и я хочу иметь кнопку "Выбрать все" или "Выбрать все". Однако я не хочу полагаться на имя элемента ввода (например, этот пример), а скорее тип потому что у меня есть несколько групп флажков с разными именами. Есть ли способ проверить и снять все элементы ввода флажка в форме с помощью JavaScript, опираясь на тип вместо имени?

Изменить: мы полагаемся на библиотеки YUI, поэтому у меня есть доступ к YUI, если это обеспечивает решение.

Ответы

Ответ 1

Это должно сделать это:

<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>

Ответ 2

итерации по коллекции form.elements и 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;
}

Ответ 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);
        }
    }

Ответ 4

Каждый элемент ввода имеет атрибут, тип, который для флажков "checkbox", чтобы вы могли попробовать что-то вроде этого:

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

Ответ 5

Если jQuery - это вариант, вы можете сделать это довольно легко.

См. документацию по селектора jQuery. (Последний пример в разделе показывает, как сделать это с помощью переключателей, но просто замените их на флажки.)

Ответ 6

Назначает ли класс всем необходимым элементам флажка? Если да, то это то, как я это сделал (предполагая, что "class_name" - это имя класса css, присутствующего во всех элементах флажков):

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

Если вы хотите держаться подальше от классов, но можете получить родительский элемент по ID (или любой другой метод, я буду использовать ID в примере), вы можете сделать это:

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;
      }
   }
}

Я бы придерживался метода класса.

Ответ 7

<html>
<head>
<script>
function selectCheckBox()
{   
     if(document.getElementById('id11').checked==true)
     {
        document.frm.id2.checked=true
        document.frm.id3.checked=true
        document.frm.id4.checked=true
     }
     if(document.getElementById('id11').checked==false)
     {
        document.frm.id2.checked=false
        document.frm.id3.checked=false
        document.frm.id4.checked=false
     }
}
function selectCheckBox1()
{
     if(document.getElementById('id12').checked==false)
     {
        document.frm.id1.checked=false
     }  
}
function selectCheckBox2()
{
     if(document.getElementById('id13').checked==false)
     {
        document.frm.id1.checked=false
     }  
}
function selectCheckBox3()
{
     if(document.getElementById('id14').checked==false)
     {
        document.frm.id1.checked=false
     }  
}
</script>

</head>
<body>
<form name="frm">
All   :<input type="checkbox" id="id11" name="id1" value="1" onClick="selectCheckBox()"><br>
A.    :<input type="checkbox" id="id12" name="id2" value="2" onClick="selectCheckBox1()"><br>
B.    :<input type="checkbox" id="id13" name="id3" value="3" onClick="selectCheckBox2()"><br>
C.    :<input type="checkbox" id="id14" name="id4" value="4" onClick="selectCheckBox3()"><br>
</form>
</body>
</html>