Использование JavaScript для управления элементами ввода HTML (флажок) через тип вместо имени - PullRequest
Новая
       10

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

11 голосов
/ 21 января 2009

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

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

Ответы [ 7 ]

24 голосов
/ 21 января 2009

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

<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>
1 голос
/ 21 января 2009

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

for (var i = 0; i < document.myForm.elements.length; i++) {
    if (document.myForm.elements[i].type == "checkbox") {
        document.myForm.elements[i].checked = true;
    }
}
1 голос
/ 21 января 2009 
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);
        }
    }
1 голос
/ 21 января 2009

переберите коллекцию form.elements и проверьте .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;
}
0 голосов
/ 09 июля 2011 
<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>
0 голосов
/ 21 января 2009

Можно ли назначить класс всем необходимым элементам флажка? Если да, то я бы так и сделал (предполагая, что «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;
   }
}

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

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

Однако я бы придерживался метода "class".

0 голосов
/ 21 января 2009

Если jQuery является опцией, вы можете сделать это довольно легко.

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...