Forum Moderators: open
This is the first time that position here in JavaScript's Forum. =)
I want to do a form as one of webmail. When the user clicks in some
Checkbox, he change the table line color. Also wanted that it had a checkbox for
Mark all the field, changing the table color as well..( A perfect example is webmail of the yahoo ).
I managed to make a part and worked...
Checkbox that selects everything, it selects everything, but does not put color in all field.
If click in the checkbox of low, he puts color ( that worked correctly )
In case do not have understood, copy below the code and see... It has two checkbox. One is to select everything and the other would be simple option. What selects everything, does not select with the color, and if click in the second, he works correctly.
What I have wanting is that what selects everything, select it adds the color of fund in all tables inside the form
----[CUT]------------------------------------------
<html>
<head>
<title>Test</title>
</head>
<SCRIPT LANGUAGE=javascript>
<!--
function Mark(which)
{
if (eval("form.q" + which + ".checked"))
{
eval("tr" + which + ".bgColor = '#00ff00'")
}
else
{
eval("tr" + which + ".bgColor = ''")
}
}
//-->
</SCRIPT>
<script language="JavaScript" type="text/javascript">
<!--
cont = 0;
function SelectAll() {
for (var i=0;i<document.form.elements.length;i++) {
var x = document.form.elements[i];
if (x.id == 'option') {
x.checked = document.form.principal.checked;
}
}
}
//-->
</script>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><form name="form" method="post" action="">
<table width="100%" cellspacing="2">
<tr>
<td width="2%"><span class="Verdana12">
<input type="checkbox" name="principal" onclick="SelectAll()" />
</span></td>
<td width="98%"> </td>
</tr>
<tr name="tr01" id="tr01">
<td><span class="Verdana12">
<input onClick="Mark('01')" type="checkbox" id="option" name="q01" value="001" />
</span></td>
<td> </td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</BODY>
</HTML>
----[CUT]------------------------------------------
Thank you very much to everybody
<SCRIPT LANGUAGE=javascript>
<!--
function Mark(which)
{
if (eval("form." + which + ".checked"))
{
eval("tr" + which + ".bgColor = '#00ff00'")
}
else
{
eval("tr" + which + ".bgColor = ''")
}
}
//-->
</SCRIPT>
<script language="JavaScript" type="text/javascript">
<!--
cont = 0;
function SelectAll() {
for (var i=0;i<document.form.elements.length;i++) {
var x = document.form.elements[i];
if (x.id == 'q01') {
Mark('principal');
x.checked = document.form.principal.checked;
Mark('q01')
}
}
}
//-->
</script>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><form name="form" method="post" action="">
<table width="100%" cellspacing="2">
<tr id="trprincipal">
<td width="2%"><input type="checkbox" id="principal" name="principal" onclick="SelectAll()" /></td>
<td width="98%"> </td>
</tr>
<tr name="trq01" id="trq01">
<td><input onClick="Mark('q01')" type="checkbox" id="q01" name="q01" value="001" /></td>
<td> </td>
</tr>
</table>
</form>
</td>
</tr>
</table>
....
tip : I think, it's better not to use any special words (like "option") as id or form element name. Who knows how it'd work? and there are a lot of other words around ;) And it'd be better to use the same word for id and the element name imho, if you want to have both.
It worked perfectly, thanks.
But I am with a doubt. If you have a line, it works legal, but we have 20 lines, would have to publish the code manually, but how I do not know the lines quantity that would have ( it is a dynamic system ), do not know what to do. He would have as to ivés of puting a name in the table, just to put that if that checkbox is selected, the table changes by heart.
I added one more lines in script and always have to put the name of that field. The perfect to would be me a system that if for checkbox was selected, the table would change by heart, otherwise, would be empty, without the need to use references (01, 02, 03) to work. He would have how to use ( example: Checkbox - if you have selected, changes, does not get empty )
--[CUT]-----------------------------------------------
<SCRIPT LANGUAGE=javascript>
<!--
function Mark(which)
{
if (eval("form." + which + ".checked"))
{
eval("tr" + which + ".bgColor = '#00ff00'")
}
else
{
eval("tr" + which + ".bgColor = ''")
}
}
//-->
</SCRIPT>
<script language="JavaScript" type="text/javascript">
<!--
cont = 0;
function SelectAll() {
for (var i=0;i<document.form.elements.length;i++) {
var x = document.form.elements[i];
if (x.id == 'q01') {
x.checked = document.form.principal.checked;
Mark('q01')
}
if (x.id == 'q02') {
x.checked = document.form.principal.checked;
Mark('q02')
}
if (x.id == 'q03') {
x.checked = document.form.principal.checked;
Mark('q03')
}
}
}
//-->
</script>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><form name="form" method="post" action="">
<table width="100%" cellspacing="2">
<tr id="trprincipal">
<td width="2%"><input type="checkbox" id="principal" name="principal" onClick="SelectAll()" /></td>
<td width="98%"> </td>
</tr>
<tr name="trq01" id="trq01">
<td><input onClick="Mark('q01')" type="checkbox" id="q01" name="q01" value="001" /></td>
<td> </td>
</tr>
<tr name="trq02" id="trq02">
<td><input onClick="Mark('q02')" type="checkbox" id="q02" name="q02" value="001" /></td>
<td> </td>
</tr>
<tr name="trq03" id="trq03">
<td><input onClick="Mark('q03')" type="checkbox" id="q03" name="q03" value="001" /></td>
<td> </td>
</tr>
<tr name="trq04" id="trq04">
<td><input onClick="Mark('q04')" type="checkbox" id="q04" name="q04" value="001" /></td>
<td> </td>
</tr>
</table>
</form>
</td>
</tr>
</table>
---[CUT]---------------------------------------------
Would he have as do it to help me to do that?
function SelectAll() {
for (var i=0;i<document.form.elements.length;i++) {
var x = document.form.elements[i];
if(x.type == 'checkbox') {
x.checked = document.form.principal.checked;
Mark(x.id)
}
}
}
Did not test this, but should work.
Now it worked! :-)
Again I here =)
The system is working perfectly, when someone clicks in the checkbox main, he mark all the field. But when someone clicks in some checkbox marked, he not desmarca checkbox main. I wanted when anybody clicked in the that is not main, he desmarcasse the main ( until why they were not anymore everybody than are selecionandos )
It has how to do it do that?
Thank you very much!
else {
eval("tr" + which + ".bgColor = ''");
//insert begin
if((which!= 'principal')&&(document.form.principal.checked)) {
document.form.principal.checked = false;
Mark('principal')
}
//insert end
}
function Mark(which){
if (eval("form." + which + ".checked")){
eval("tr" + which + ".bgColor = '#D2E9FF'")
} else {
eval("tr" + which + ".bgColor = ''")}
if((which!= 'principal')&&(document.form.principal.checked)) {
document.form.principal.checked = false;
Mark('principal')
}
}
If you are, did not work right. He does not select all( only the first ) and the main does not become selected.
Sorry we do not understood right.... Is just that do not be very good with javascripts....
All should work ;)
Now it is everything perfect.
Thank you very much by its attention
