javascript - 如何识别javascript中的单选按钮

标签 javascript html jsp jstl

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

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

最佳答案

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

使用道场的例子:

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

我会把它留给你来纠正单选按钮的行为......

关于javascript - 如何识别javascript中的单选按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2271826/

相关文章:

javascript - 重构 JavaScript 对象的最佳方法是什么?

javascript - Firebase Cloud Functions 运行 Python 脚本

javascript - Extjs View 渲染问题,未捕获类型错误 : Cannot read property 'tooNarrow' of undefined

javascript - 如何使一行内的所有图像大小相等?

html - 将 2 个标题放在 2 个面板的中间

javascript - 设置一个 JavaScript 来记录商店是开着还是关着

java - Struts2从JSP发送列表数据到Action类: alternative way

javascript - 将 JavaScript 代码分解为函数

java - 实时聊天 Servlet JSP 应用程序

java - 带有 xml 配置的 Struts2 validator 不起作用