How to reference by id more elements with the same id?

Re: How to reference by id more elements with the same id?

Logico napisał(a):[color=blue]
> Hi everybody, I need to do a function in javascript to check or
> uncheck all checkboxes with the same id.[/color]
[...][color=blue]
> I will use the same id ("sel") for all checkboxes in the site[/color]

[snip]

None of the elements in a HTML document body may have two identical ids.
I suggest further reading about (x)html attrributes.

--
tomasz cenian tcenian at wa dot home dot pl
:::: :: : : http://cenian.boo.pl : : :: ::::

Re: How to reference by id more elements with the same id?

"Logico" <amilani@dsi.un ive.it> wrote in message
news:ffe0d3c1.0 503100310.157ea e2@posting.goog le.com...[color=blue]
> Hi everybody, I need to do a function in javascript to check or
> uncheck all checkboxes with the same id. I want this function to work
> in every form and every page of my site, as I will use the same id
> ("sel") for all checkboxes in the site. So I need to refer to these by[/color]
<snip>

Element IDs must be unique to each page but you can assign them each the
same class and reference by that instead. I think the class can be empty so
it needn't upset your current styling.

Alternatively number the IDs sequentially and reference them with a simple
javascript loop.

Re: How to reference by id more elements with the same id?

"Logico" <amilani@dsi.un ive.it> wrote in message
news:ffe0d3c1.0 503100310.157ea e2@posting.goog le.com...[color=blue]
> Hi everybody, I need to do a function in javascript to check or
> uncheck all checkboxes with the same id. I want this function to work
> in every form and every page of my site, as I will use the same id
> ("sel") for all checkboxes in the site. So I need to refer to these by
> id.
> I tried with:
> document.getEle mentById("sel")
> but this returns only the reference to the first element.
> Does anyone know how I can do?
>
> This is the typical situation of the checkboxes:
>
> <form name="form1" method="post" action="">
> <table>
> <tr>
> <td><input name="sel" type="checkbox" id="sel" value="1"></td>
> <td>First row</td>
> </tr>
> <tr>
> <td><input name="sel" type="checkbox" id="sel" value="6"></td>
> <td>Second row</td>
> </tr>
> <tr>
> <td><input name="sel" type="checkbox" id="sel" value="5"></td>
> <td>N row</td>
> </tr>
> </table>
> <input type="button" value="Select all" onClick="select ('A');">
> <input type="button" value="Select nothing" onClick="select ('N');">
> </form>
>
> thanks,
>
> AM[/color]

Will this help? Watch for word-wrap.

The function was renamed to "selects()" as "select()" wouldn't work as it's
a reserved word.

<html>
<head>
<title>selects. htm</title>
<script type="text/javascript">
function selects(what) {
var form = document.form1;
for (var i=0; i<form.elements .length; i++) {
if (form.elements[i].type == "checkbox") {
if (what == 'A') {
form.elements[i].checked = true;
} else {
form.elements[i].checked = false;
}
}
}
}
</script>
</head>
<body>
<form name="form1" method="post" action="">
<table>
<tr>
<td><input name="sel" type="checkbox" id="sel" value="1"></td>
<td>First row</td>
</tr>
<tr>
<td><input name="sel" type="checkbox" id="sel" value="6"></td>
<td>Second row</td>
</tr>
<tr>
<td><input name="sel" type="checkbox" id="sel" value="5"></td>
<td>N row</td>
</tr>
</table>
<input type="button" value="Select all" onClick="select s('A');">
<input type="button" value="Select nothing" onClick="select s('N');">
</form>
</body>
</html>

Re: How to reference by id more elements with the same id?

Logico wrote:
[color=blue]
> Hi everybody, I need to do a function in javascript to check or
> uncheck all checkboxes with the same id.[/color]

[snip]

What others have said is correct: every id in a document must be
unique. Your mark-up is invalid otherwise.

Though you could change the id values or use classes, as previously
suggested, there's no need: use the identical name attributes (which
is perfect valid) instead. There are two approaches:

1) The elements collection:

var collection = form.elements['sel'];

2) The getElementsByNa me method:

var collection = document.getEle mentsByName('se l');

Both return a collection (effectively, a reduced capability array)
that you may iterate through. The distinction between the two is
mainly one of scope: the elements collection will return only matching
elements within the form, whilst the getElementsByNa me method will
return matching elements throughout the document. You'll probably want
the former.

Note that elements other than checkboxes may be returned if other
elements have a matching name. You may need to check the type of
element before manipulating it. If the elements are guaranteed to be
homogeneous, there's no need. Also be aware that the elements
collection also return elements based on id attributes, but that is no
reason to keep using duplicated id values.

How you get a reference to the form will vary. The document.forms
collection is obvious, but if the code is activated by another control
- for example, another control within the form - then there is a more
direct alternative:

<input type="checkbox" onclick="select All(this.form); ">

function selectAll(form) {
/* ... */
}

Hope that helps,
Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.