Alessandro Lacava’s Blog

Google
 

January 16, 2007

How to detect the selected checkboxes using JavaScript

Filed under: Computer, JavaScript — alessandrolacava @ 6:31 pm

Here is an example of how you can retrieve the selected checkboxes using a JavaScript function:

PLAIN TEXT
HTML:
  4. function getSelectedValues(elem)
  5. {
  6. var elemNumber = document.myForm.test.length;
  7.  
  8. var selectedElems = [];
  9. for(j = 0; j <elemNumber; j++)
  10. {
  11. if(elem[j].checked)
  12. {
  13. selectedElems.push(elem[j].value);
  14. }
  15. }
  16. return selectedElems;
  17. }
  18. </script>
  19. </head>
  20.  
  22. <form id="myForm" name="myForm">
  23. <input type="checkbox" id="test" name="myCheckBox" value="test1">
  24. Test 1
  25.  
  26.  
  27. <input type="checkbox" id="test" name="myCheckBox" value="test2">
  28. Test 2
  29.  
  30.  
  31. <input type="button" value="Click Here" onclick="alert(getSelectedValues(document.myForm.myCheckBox));">
  32. </form>
  33. </body>
  34.  
  35. </html>

In the previous example when the user clicks on the button the selected checkboxes are displayed through an alert.


How to set a link as if the mouse were over it using JavaScript

Filed under: Computer, JavaScript, CSS — alessandrolacava @ 4:53 pm

In order to do it when, for example, the page loads, use the following JavaScript trick:

PLAIN TEXT
HTML:
  2.  
  4. <script type="text/javascript">
  5. function markAsOver(linkId)
  6. {
  7. var elem = document.getElementById(linkId);
  8. elem.focus();
  9. }
  10. </script>
  11. </head>
  12.  
  13. <body onload="javascript:markAsOver('myLink');">
  14. <a id="myLink" xhref="someUrl.htm">This is selected</a>
  15. </body>
  16.  
  17. </html>

Of course you can use the CSS to take advantage of the previous code and make the link look as if it were active (selected). Here is an example:

PLAIN TEXT
CSS:
  1. a:hover, a:active, a:focus
  2. {
  3. color: red;
  4. }

If you use this code as CSS then the myLink link will be red as soon as the page loads.

Note: The a:focus pseudo-class works with Firefox.