All geek questions in one place

How to define a switch in javascript

I create a dynamic table in which each row contains a group of radio buttons placed in different columns. I want to change the background color of a cell when the radio button is clicked. I am building a table using the code snippet below. How to define a radio button in javascript so that I can set the cell with the corresponding background color.

<table> <c:forEach> <tr> <c:forEach> <td><input type="radio" value="" /></td> </c:forEach> </tr> </c:forEach> </table>
+4
source share
6 answers

Use dojo or jQuery to select a radioButton node, then use CSS filter expressions to set the td tag (parentNode dom node) to whatever color you want.

An example of using dojo:

 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Dojo selectors example</title> <script type="text/javascript"> var djConfig = { parseOnLoad: true, isDebug: true, locale: 'en-us' }; </script> <script type="text/javascript" src="http://o.aolcdn.com/dojo/1.4.1/dojo/dojo.xd.js"></script> <script type="text/javascript"> dojo.addOnLoad(function() { // Get all the radioButtons that are inside a <td> tag dojo.query("td > input").forEach(function(node, index, array){ var td = node.parentNode; dojo.addClass(td, "red"); dojo.connect(td, "onclick", function(){dojo.toggleClass(td, "white");}); }); }); </script> <style type="text/css"> .red { background-color : red; } .white { background-color : white; } </style> </head> <body> <form id="form1"> <table> <tr> <td><input type="radio" value="" /></td> </tr> <tr> <td><input type="radio" value="" /></td> </tr> <tr> <td><input type="radio" value="" /></td> </tr> </table> </form> </body> </html>

I will leave it to you to fix the behavior of the radio ...

+1
source

you should try to set a unique identifier for the input field when creating it (for example, id = "theradiobutton")

Then you can easily reference it using the DOM methods!

0
source

You need to set an identifier or use the name of a fake class.

Later I have to use jquery for access and change. http://www.google.es/search?rlz=1C1GGLS_esES361ES361&sourceid=chrome&ie=UTF-8&q=radio+button+jquery

0
source 
 var myform = document.forms['myform']; for ( var i=0; i < myform.elements; i++ ) if ( myform.elements[i].type == 'radio' ) ...do your stuff

Hope this helps.

0
source

It is simple with jQuery . Here is SSCCE , copy'n'paste'n'run it.

 <!doctype html> <html lang="en"> <head> <title>Test</title> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script> $(document).ready(function() { $('#tableId input[name=row]').click(function() { $('#tableId tr').removeClass('selected'); // Reset. $(this).parents('tr').addClass('selected'); }); }); </script> <style> tr.selected { background: #ffc; } </style> </head> <body> <table id="tableId"> <tr><td><input type="radio" name="row" value="row1">row1</td></tr> <tr><td><input type="radio" name="row" value="row2">row2</td></tr> <tr><td><input type="radio" name="row" value="row3">row3</td></tr> </table> </body> </html>

Just translate the table back into the dynamic flavor that you had with JSP / JSTL.

0
source

Without getting too fussy, it's really very simple. You do not need to identify the switch, just call the event handler and pass it the button instance:

 <td><input type="radio" value="" onclick="colorMyCell(this)" /></td>

and handler:

 function colorMyCell(inp) { // get reference to the row var tr = inp.parentNode.parentNode; // put the TD children of the row into an array var cells = tr.getElementsByTagName("TD"); // bgcolor all the other cells in that row white for (var i=0; i<cells.length; i++) { cells[i].style.backgroundColor = "#ffffff"; } // now bgcolor the selected cell differently inp.parentNode.style.backgroundColor = "#ffffcc"; }

Please note that this is just a quick and dirty example of how to do this. You would like to take care of this more (make sure that inp.parentNode.parentNode is really TR unless you find a better way to work your way up the tree to find the actual TR predecessor file), and use CSS classNames instead of directly setting background colors etc.

0
source

Source: https://habr.com/ru/post/1301420/

More articles:


All Articles