468,315 Members | 1,526 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,315 developers. It's quick & easy.

Problem with form checkboxes

263 100+
I need one function javascript that:

1) when I enter in this htm page I see enabled only checkbox of categories A, M and T; checkboxes of microcategories all disabled;

2-a) If I select the checkbox of macrocategory A, M and T checkboxes all disabled;
2-b) If I select the checkbox of macrocategory M, A and T checkboxes all disabled;
2-c) If I select the checkbox of macrocategory T, A and M checkboxes all disabled;

3) If I select the checkbox macrocategory A enable only the checkboxes of microcategories corresponding to macrocategory A;
4) If I select the checkbox macrocategory M enable only the checkboxes of microcategories corresponding to macrocategory M;
5) If I select the checkbox macrocategory T enable only the checkboxes of microcategories corresponding to macrocategory T;

6) One checkbox of macrocategory and one checkbox of microcategory selected for the form it's valid.


My form in the page htm:

Expand|Select|Wrap|Line Numbers
  1. <form.... >
  2.  
  3. <input type="checkbox" name="A" value="A">A
  4. <input type="checkbox" name="IN" value="IN">IN<br>
  5. <input type="checkbox" name="IS" value="IS">IS<br>
  6. <input type="checkbox" name="PA" value="PA">PA<br>
  7.  
  8. <input type="checkbox" name="M" value="M">M
  9. <input type="checkbox" name="IN" value="IN">IN<br>
  10. <input type="checkbox" name="IS" value="IS">IS<br>
  11. <input type="checkbox" name="PA" value="PA">PA<br>
  12.  
  13. <input type="checkbox" name="T" value="T">T
  14. <input type="checkbox" name="IN" value="IN">IN<br>
  15. <input type="checkbox" name="IS" value="IS">IS<br>
  16. <input type="checkbox" name="PA" value="PA">PA<br>
  17.  
  18. </form>
  19.  
Nov 13 '09 #1
7 1953
acoder
16,027 Expert Mod 8TB
My suggestion:

Use radio buttons for A, M & T; and only have one set of radio buttons for IN, IS and PA:
Expand|Select|Wrap|Line Numbers
  1. <form.... >
  2.  
  3. <input type="radio" name="macro" value="A">A
  4. <input type="radio" name="macro" value="M">M
  5. <input type="radio" name="macro" value="T">T
  6. <input type="radio" name="macrosub" value="IN">IN<br>
  7. <input type="radio" name="macrosub" value="IS">IS<br>
  8. <input type="radio" name="macrosub" value="PA">PA<br>
  9.  
  10. </form>
  11.  
Should solve your problem without JavaScript.
Nov 13 '09 #2
viki1967
263 100+
Many thanks Acoder for your suggestion, but I need use this page htm as explained... can you help me?
Nov 13 '09 #3
Dormilich
8,651 Expert Mod 8TB
Acoderís code exactly fits requirements 3 to 6.
requirement 2 does not apply (you canít select more than one)
Nov 14 '09 #4
acoder
16,027 Expert Mod 8TB
And requirement 1 is no longer needed either.

If you insist (or more for the benefit of someone wanting to know how it could be done), set the disabled property of the checkboxes to true/false to disable/enable when a checkbox is clicked. To decide whether to enable/disable, check the "checked" property:
Expand|Select|Wrap|Line Numbers
  1. if (chkbox.checked) {
  2.     // enable/disable checkboxes here
  3. }
My opinion: too much unnecessary code for something that can be done with pure HTML. If you want an alternative to radio buttons, use two select boxes:
Expand|Select|Wrap|Line Numbers
  1. <select ...>
  2. <option ...>...</option>
  3. ...
  4. </select>
Nov 14 '09 #5
viki1967
263 100+
Try this page:
http://www.avia-it.com/testaruba/
Nov 14 '09 #6
viki1967
263 100+
I have changed the input checkbox with input radio:

http://www.avia-it.com/testaruba/

But I have problem with control the exact combination of the radio:

It's OK: http://www.avia-it.com/testaruba/immagine_1.jpg
it's KO: http://www.avia-it.com/testaruba/immagine_2.jpg

Can you help me?
Nov 17 '09 #7
acoder
16,027 Expert Mod 8TB
Hmm, ok, it seems you didn't describe the problem properly in the first post.

I assumed that all 3 main options A, M and T had the same sub-options. Since it isn't, and the list of options is long, it would probably be more appropriate to use select drop-downs. Then when, for example, M is selected, the corresponding options are loaded into the second drop-down.

3 basic steps:
1. An array containing the options
2. Two drop-downs in the HTML
3. When the first drop-down option is changed, load the new options into the second one.

PS. you could go the way that you originally stated with checkboxes, but that takes up too much space on the screen.
Nov 18 '09 #8

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

3 posts views Thread by Adam Toline | last post: by
10 posts views Thread by Steven | last post: by
4 posts views Thread by Alex Sibilev | last post: by
3 posts views Thread by Ankit Aneja | last post: by
16 posts views Thread by GTi | last post: by
6 posts views Thread by rohit reja | last post: by
reply views Thread by Teichintx | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.