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

L

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
 
T

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
Click to expand...

[snip]

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

Danny@Kendal

Logico said:
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
Click to expand...
<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.
 
M

McKirahan

Logico said:
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
Click to expand...

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.type == "checkbox") {
if (what == 'A') {
form.elements.checked = true;
} else {
form.elements.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>
 
M

Michael Winter

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

[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
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Bootstrap contact form not working 2
Hello I am learning how to code and I tried making a calculator with HTML and js with some CSS I am stuck at thing, Like the screen value is 0
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript? 0
Sort by number of characters 1
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript? 0
I am using 2 loops, 1 for input and 1 for td. Can we achieve the same functionality with 1 loop in Jquery? 4
Script to send email not working 1
Filter table rows based on multiple checkboxes value 2

Members online

No members online now.
Total: 482 (members: 0, guests: 482)
Robots: 335

Forum statistics

Threads
474,432
Messages
2,571,681
Members
48,796
Latest member
Greg L.

Latest Threads

Top