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

后端未结

关注

 7  2006

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

相关标签:

7条回答

难免孤独

2021-01-04 14:56

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.

0 讨论(0)

天命终不由人

2021-01-04 14:59
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;
    }
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

独厮守ぢ

2021-01-04 15:01

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

0 讨论(0)

天命终不由人

2021-01-04 15:02

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

0 讨论(0)
发布评论:

提交评论
- 加载中...

清歌不尽

2021-01-04 15:10

<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 讨论(0)

广开言路

2021-01-04 15:12

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>

0 讨论(0)

1 2 下一页