ansaurus

Question

how to identify the radio button in javascript

Answer 1

A:

you should try and set a unique id for the input field when creating it (e.g. id="theradiobutton")

Then you can reference it easily using DOM methods!

Ganesh Shankar 2010-02-16 09:46:58

you could also add an onClick() event to each radio button to do what you require. But it's better to have a unique identifier...

Ganesh Shankar 2010-02-16 09:55:25

Answer 2

A:

You need to set the id or use a fake class name.

Later I should use jquery for accessing and changing them. http://www.google.es/search?rlz=1C1GGLS_esES361ES361&sourceid=chrome&ie=UTF-8&q=radio+button+jquery

Pablo Castilla 2010-02-16 09:47:45

Answer 3

A:

var myform = document.forms['myform'];

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

Hope it helps.

aefxx 2010-02-16 09:48:05

this is ok but if you have more than one radio button and only want to set the background colour on ONE of these, it'll start getting messy...

Ganesh Shankar 2010-02-16 09:53:42

Answer 4

+1 A:

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

Example 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"&gt;&lt;/script&gt;
        <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'll leave it up to you to correct the radiobutton's behaviour...

Philippe 2010-02-16 13:17:26

Answer 5

A:

It's simple with jQuery. Here's an 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"&gt;&lt;/script&gt;
        <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 you've had with JSP/JSTL.

BalusC 2010-02-16 13:50:57

This is the approach I would take, but I would use the built-in jquery radio selector since it is more performant (and requires less tweaking of the html). So it would be $("#tableId :radio").click(function() ...);

ckramer 2010-02-17 02:47:52

@ckramer: I know this one. However, he might have more radiobuttons in the same table for other purposes. I would otherwise "accidently" have used `input[type=radio]` ;) Oh, if you like this approach, why don't you just upvote? :o

BalusC 2010-02-17 02:48:35

Answer 6

A:

Without getting too fussy about it, this is really pretty simple. You don't need to identify the radio button, just call an event handler and pass the instance of the button with it:

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

and the 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";
}

Note that this is just a quick and dirty example of how to do this. You would want to take more care with it (make sure inp.parentNode.parentNode really is a TR, if not find a better way to work your way up the tree to find the actual first-ancestor TR), as well as using CSS classNames instead of directly setting background colors, and so on.

Robusto 2010-02-16 22:15:26

ansaurus

tags:

views:

answers:

how to identify the radio button in javascript

related questions