Question

我正在创建一个动态表，其中每一行都有一组放置在不同列中的单选按钮。我想在单击单选按钮时更改单元格背景颜色。我正在使用下面的代码片段构建表格。如何识别javascript中的单选按钮，以便我可以使用适当的背景颜色设置单元格。

<table>
    <c:forEach>
        <tr>
            <c:forEach>
                <td><input type="radio" value="" /></td>
            </c:forEach>
        </tr>
    </c:forEach>
</table>

Answer 1

使用dojo或jQuery选择radioButton节点，然后使用CSS过滤器表达式将td标记（parentNode dom节点）设置为您想要的任何颜色。

使用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>

我会留给你纠正radiobutton的行为......

Answer 2

您应该在创建时尝试为输入字段设置唯一ID（例如id =“theradiobutton”）

然后您可以使用DOM方法轻松引用它！

Answer 3

您需要设置ID或使用假类名。

稍后我应该使用jquery来访问和更改它们。 http://www.google.es/search?rlz=1C1GGLS_esES361ES361&sourceid=chrome&ie=UTF-8&q=radio+button+jquery

Answer 4

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

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

希望它有所帮助。

Answer 5

jQuery很简单。这是一个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>

只需将表格转换回JSP / JSTL所具有的动态风格。

Answer 6

没有太过挑剔，这真的很简单。您不需要识别单选按钮，只需调用事件处理程序并使用它传递按钮的实例：

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

和处理程序：

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

请注意，这只是一个如何执行此操作的快速而肮脏的示例。你会想要更加小心（确保inp.parentNode.parentNode真的是一个TR，如果没有找到一个更好的方式在树上找到实际的第一个祖先TR），以及使用CSS classNames而不是直接设置背景颜色，等等。

如何识别javascript中的单选按钮

6 个答案: