javascript document.getElementsByName方法操作radio

最新推荐文章于 2023-03-24 10:12:24 发布

原创最新推荐文章于 2023-03-24 10:12:24 发布 · 8.2k 阅读

3 ·

CC 4.0 BY-SA版权

Javascript 专栏收录该内容

56 篇文章

订阅专栏

本文介绍了一种使用JavaScript遍历及获取HTML中Radio按钮值的方法。通过具体的代码示例，展示了如何利用JavaScript的for循环来遍历名为'gender'的所有Radio按钮，并弹窗显示其值。此外，还提供了一个函数用于获取已选中的Radio按钮的值。

<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        //遍历所有Radio的Value
        function onclickme() {
            var radios = document.getElementsByName("gender");
            /*
            //在Js中for(var radio in radios)不像C#中的foreach,
            并不会遍历每个元素,而是遍历Key,即所有属性
            for(var radio in radios) {
            alert(radio.value);
            }*/
            for (var i = 0; i < radios.length; i++) {
                var radio = radios[i];
                alert(radio.value);
            }
        }
        //取得选中的Radio的value
        function GetCheckedValue() {
            var radios = document.getElementsByName("gender");
            for (var i = 0; i < radios.length; i++) {
                var radio = radios[i];
                if (radio.checked) {           //判断是否选中
                    alert(radio.value);
                }
            }
        }
    </script>
</head>
<body>
    <input type="radio" name="gender" value="男" />男
    <input type="radio" name="gender" value="女" />女
    <input type="radio" name="gender" value="保密" />保密
    <input type="button" value="遍历所有的Value" onclick="onclickme()" />
    <input type="button" value="取得选中的Radio的value" onclick="GetCheckedValue()" />
</body>
</html>