代码之家 › 专栏 › 技术社区 › Julien Chastang

使用JavaScript通过类型而不是名称操作HTML输入(复选框)元素

html javascript

Julien Chastang · 技术社区 · 17 年前

我不想依赖这个名字 this example 类型因为我有多个名称不同的复选框组。是否有一种方法可以通过依赖类型而不是名称来选中和取消选中JavaScript表单中的所有复选框输入元素?

编辑:我们依赖于YUI库,所以如果YUI提供了解决方案,我可以访问YUI。

7 回复 | 直到 17 年前

Paolo Bergantino 17 年前

这应该做到:

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

Al W 17 年前

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

jishi 17 年前

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

takrl cck 15 年前

每个输入元素都有一个属性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;
    }
}

Spencer Ruport 17 年前

请参阅上的文档 jQuery selectors . (本节的最后一个示例显示了如何使用单选按钮,但只需将其替换为复选框即可。)

MK_Dev 17 年前

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

-3

takrl cck 15 年前

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