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

Jul 23 '05 #1

Subscribe Reply

27928

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.un ive.it> wrote in message
news:ff******** *************** **@posting.goog le.com...

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.un ive.it> wrote in message
news:ff******** *************** **@posting.goog le.com...

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

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>

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

Jul 23 '05 #5

Similar topics

1600

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 elements as possible when it is opened. As default there is only 12 elements that shows and then I have to scroll down to the other 28 elements. Is there a way to set the selectbox to show more than 12 elements when its opened?

Javascript

2656

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 manual coding and positioning. So far I think I've done OK for a newbie (you can go to http://home.comcast.net/~vikenk to see my latest site, which is based mostly on a CSS). But now I have a question: I'm trying to position a Java Applet using...

HTML / CSS

1369

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 and examples of HTML elements. Can anyone point me at any similar resources for Javascript? TIA,

Javascript

2437

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 button). Is there any way I can keep the form for disabling every time a user hits the back button and "remember" what elements should be enabled? I was thinking maybe utilizing some referrer thing, but I'm not that good with JS yet. Thanks...

Javascript

1875

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: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - <script language="javascript" type="text/javascript"> function js_onsubmit_hndl_fn () {

Javascript

5110

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 the wsdl). This complex type is a collection of another complex type(elementType), and the Reference.cs has an array of these rather than the single returnedElementsType. If If I want to be able to obtain these elements from the SOAP response I...

.NET Framework

3644

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 string to a integer number. bool Convert(const string& str, int* pData); bool Convert(const string& str, int& data);

C / C++

2128

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> ..... myArray = document.getElementById("someId1"); myArray = document.getElementById("someId2");

Javascript

1567

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 specify that some specific elements may have children which are XHTML %Flow; elements. It isn't valid for these elements to contain arbitrary XHTML, and it isn't valid for other elements in my language to have any XHTML children. I presume I can't...

.NET Framework

2349

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 certificate) over the hashes from step 1 and 2 Most of the examples I've been looking at are doing a digital

C# / C Sharp

8737

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, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...

General

8649

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...

Windows Server

9084

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...

Online Marketing

8978

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...

Windows Server

7827

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, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...

Career Advice

6573

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 presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...

Microsoft Access / VBA

4665

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

2399

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

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

PHP

2036

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 can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

General