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

Logico

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.getElementById("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

Jul 23 '05 #1

Subscribe Reply

27920

Tomasz Cenian

Logico napisaÅ‚(a):

Hi everybody, I need to do a function in javascript to check or
uncheck all checkboxes with the same id. [...] I will use the same id ("sel") for all checkboxes in the site

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

Jul 23 '05 #2

Danny

"Logico" <am*****@dsi.unive.it> wrote in message
news:ff*************************@posting.google.co m...

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

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

Jul 23 '05 #3

McKirahan

"Logico" <am*****@dsi.unive.it> wrote in message
news:ff*************************@posting.google.co m...

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.getElementById("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

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="selects('A');">
<input type="button" value="Select nothing" onClick="selects('N');">
</form>
</body>
</html>

Jul 23 '05 #4

Michael Winter

Logico wrote:

Hi everybody, I need to do a function in javascript to check or
uncheck all checkboxes with the same id.

[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 getElementsByName method:

var collection = document.getElementsByName('sel');

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 getElementsByName 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="selectAll(this.form);">

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

Hope that helps,
Mike

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

Jul 23 '05 #5

Similar topics

1581

Setting the number of elements in selectboxes...

by: Kjell Breimo | last post by:

Hi, I have made a selectbox (<Select....><option...>...) with size=1(It has to be size=1). It contains about 40 elements. It is placed on the top of my webpage abd I would like to see as many...

Javascript

2650

How do I reference an Object ID in my CSS?

by: vikenk | last post by:

Hello, This is my first post to this group. A little background first: I'm not not new to web-design, but new to manual coding :>) I'm trying to move from total dependence on FrontPage to more...

HTML / CSS

1348

A Good JavaScript Reference Guide

by: colin.steadman | last post by:

I often use the HTML reference guide at Microsoft which is located here: http://msdn.microsoft.com/library/default.asp?url=/workshop/author/html/reference/elements.asp It gives a descriptions...

Javascript

2400

keep form elements enabled on "back" request

by: Dani | last post by:

Hello everybody, I have some code that disables form elements on body load, but I notice when I hit the "back" button, I need to re-enable the form elements (that is done by clicking on a radial...

Javascript

1844

Cannot reference elements of an object with on-submit event handler

by: wASP | last post by:

Hi, I'm having a problem referencing the elements within an object after a method of that object (a member function) has been activated with an onsubmit handler: - - - - - - - - ...

Javascript

5084

Add Web Reference does not generate all classes in proxy

by: Richard Gregory | last post by:

Hi, I have the wsdl below, for an Axis web service, and when I select Add Web Refernce in Visual Studio the proxy is missing a class representing the returnedElementsType (see reference.cs below...

.NET Framework

3618

Using pointer or reference?

by: shuisheng | last post by:

Dear All, The problem of choosing pointer or reference is always confusing me. Would you please give me some suggestion on it. I appreciate your kind help. For example, I'd like to convert a...

C / C++

2109

Reference Gets Lost After Repainting the HTML Object

by: vunet.us | last post by:

Please, explain an interesting phenomenon, if you can. I have an array of references to an HTML element: <div id='container'> <div id='someId1'></div> <div id='someId2'></div> </div> ........

Javascript

1557

Allowing specific elements from another namespace...

by: Simon Brooke | last post by:

I have a document type which I'm developing and working with, which is currently defined in a DTD, mainly because I still haven't really learned to use schemas. In this document type I need to...

.NET Framework

2317

xml dsig, how to save and hash reference elements?

by: AK | last post by:

Hello, I need to do the following with an xml document which has a list of assets: 1. Hash the assets 2. Hash the element describing the assets 3. Create a digital signature (using X.509...

C# / C Sharp

7105

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

7132

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

7341

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General

5439

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

Career Advice

4870

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

Microsoft Access / VBA

4564

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...

C# / C Sharp

1381

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated ...

C# / C Sharp

600

php

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP

266

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence...

General