Question

我是一个DOM / javascript新手试图让我的基础知识正确。我只是想在点击它时观察单选按钮的行为。这是我的代码。

HTML

    <script src="tmp.js"></script>
    <input type="radio" id="inp1" name="same" onclick="show();"/>
    <input type="radio" id="inp2" name="same" onclick="show();"/>

JS（tmp.js）

   function show() {
       alert(document.getElementById("inp1").value + " " + document.getElementById("inp2").value);
   }

让我感到困惑的是，在点击其中一个按钮时，运行警告框时会显示“on on”。不应该“开启”或“关闭”吗？

Answer 1

不，不应该。该值是您在value属性中指定的任何值（如果您未提供单选按钮，则默认为'on'）。

由于只有经过检查的单选按钮才能成功并发送到服务器，因此不需要更改该值（提交表单时不会包含数据）。

已检查状态存储在checked属性中，您可以使用JavaScript中的状态来确定当前选中的单选按钮。

Answer 2

看起来你想得到的是checked属性，看看：

   function show() {
       alert( document.getElementById("inp1").checked + " " + 
              document.getElementById("inp2").checked);
   }

工作示例：http://jsfiddle.net/w7vGL/

Answer 3

您应该使用checked属性，该值仅确定选中时的内容。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<script type="text/javascript">
    function show() {
        alert(document.getElementById("inp1").checked + " " + document.getElementById("inp2").checked);
    }
</script>
</head>
<body>
<input type="radio" id="inp1" name="same" onclick="show();"/>
<input type="radio" id="inp2" name="same" onclick="show();"/>
</body>
</html>

Answer 4

请改用checked，但请记住它会为您提供一个布尔值，因此以下代码可以满足您的需求：

function show() {
   alert(document.getElementById("inp1").checked ? 'on' : 'off'
 + " " + document.getElementById("inp2").checked ? 'on' : 'off'
   );
}

单选按钮的行为

4 个答案: