Использование 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>