Question

我的第一个问题：

这是我们大学里关于javascript的第一次讨论，我们的老师给了我们一份功课在javascript中使用append输出信息。我在w3schools学习了一些，但似乎还没有得到它。我们的作业是关于注册表格，如果您填写字段并点击按钮，它将显示注册表格下方的信息。我已经开始做作业，但我似乎无法完成它并且做对了。我希望各个信息显示为块，但它们在由空格分隔的同一行中。我还不熟悉追加，如果有人可以的话会很棒告诉我正确的作业方法。

这是我的代码：

<!doctype html>
<html>
<head>

<title>Registration</title>

<style>

    #main{
    border:3px solid green;
    background:silver;
    width:350px;
    padding:20px;
    margin-left:auto;
    margin-right:auto;
    margin-top:100px;
    font-family:tahoma;
    color:blue;
    }

    #register{
    font-size:20px;
    }

</style>

<script>

function displayInfo(){
        var uname = document.getElementById("username").value;
        var pass = document.getElementById("password").value;
        var fname = document.getElementById("fname").value;
        var mname = document.getElementById("mname").value;
        var lname = document.getElementById("lname").value;


        var info=uname+'\n'+pass+'\n'+fname+'\n'+mname+'\n'+lname;
        var t=document.createTextNode(info);

        document.body.appendChild(t);
}

</script>

</head>

<body>

    <div id="main">
        <p id="register">Registration</p>
        <table>
            <tr>
                <td>username:</td>
                <td><input type="text" id="username" size="30"></td>
            </tr>

            <tr>
                <td>Password:</td>
                <td><input type="password" id="password" size="30"></td>
            </tr>

            <tr>
                <td>Firstname</td>
                <td><input type="text" id="fname" size="30"></td>
            </tr>

            <tr>
                <td>Middlename</td>
                <td><input type="text" id="mname" size="30"></td>
            </tr>

            <tr>
                <td>Lastname</td>
                <td><input type="text" id="lname" size="30"></td>
            </tr>

            <tr>
                <td>Sex</td>
                <td>
                Guy
                <input type="radio" id="radio1" size="20" value="guy">
                Gal
                <input type="radio" id="radio2" size="20" value="gal">
                Other
                <input type="radio" id="radio3" size="20" value="other">
                </td>
            </tr>

            <tr>
            <td>Program</td>
                <td>
                It
                <input type="checkbox" id="check1" size="20" value="It">
                Cba
                <input type="checkbox" id="check2" size="20" value="Cba">
                Hosm
                <input type="checkbox" id="check3" size="20" value="Hosm">
                Other
                <input type="checkbox" id="check4" size="20" value="other">
                </td>
            </tr>

            <tr>
                <td>&nbsp;</td>
                <td><input type="button" id="submit" value="Submit"                                          
                 onCLick="displayInfo()">
                </td>
            </tr>
        </table>
    </div>



   </body>
   </html>

我的第二个问题：

关于收音机和复选框，我希望每当单击其中一个时显示该值。我在堆栈中找到了一些答案，但我不知道如何在我的代码中实现它。另一个问题的答案是这样的：

if (document.getElementById('r1').checked) {
rate_value = document.getElementById('r1').value;
}

我不知道如何在我的代码中实现这一点，我已经尝试过但它不会显示任何内容。

PS。

我不允许使用jquery，因为它是我们关于javascript的第一次讨论。提前谢谢！

Answer 1

第一个代码works for me。至于第二个问题，您要为每个单选按钮附加一个onclick处理程序：

document.getElementById('radio1').onchange = function() {
    // do your stuff here
}
//etc...

和复选框：

document.getElementById('check1').onchange = function() {
    // do your stuff here
}
//etc...

Answer 2

首先尝试避免标记中的逻辑。使用addEventListener是一个更好，可扩展的解决方案。如果你使用IE＆lt; 9然后你就会使用难以维护的尴尬和过时的代码（找到一个好的酒吧并成为一名常客）。

复选框很奇怪，因为它们不像常规表单元素那样行事。您必须手动构造适当的值。通过命名框相同，我们可以遍历它们并找到它们的checked值。收音机和复选框的处理方式不同。

单选按钮：

<input type="radio" name="foobar" value="fooVal">
<input type="radio" name="foobar" value="barVal" checked="checked">
<input type="radio" name="foobar" value="bazVal">

JavaScript（ECMAScript 5：

var checkedValue = (function(domList) {
  var value;
  Array.prototype.some.call(domList, function(checkBox) {
    if (checkBox.checked) {
      value = checkBox.value;
      return true;
    }
    return false;
  });
  return value;
})(document.getElementsByName('foobar'));

复选框

<input type="checkbox" name="foobar" value="fooVal">
<input type="checkbox" name="foobar" value="barVal" checked="checked">
<input type="checkbox" name="foobar" value="bazVal">

JavaScript（ECMAScript 5：

var checkedValues = (function(domList) {
  return Array.prototype.map.call(domList, function(checkBox) {
    if (checkBox.checked) {
      return checkBox.value;
    }
  })
  .filter(function(value) {
    return (value != null);
  });
})(document.getElementsByName('foobar'));

// You can then comma delimit...
var strValues = checkedValues.join(', ');

一个工作示例位于http://jsbin.com/vewayi/2/edit

最后，我可能会注意到，获取值的过程一般可能会干涸，如下例所示：http://jsbin.com/vewayi/4/edit

我正在尝试使用javascript </form>中的append从<form>输出信息

2 个答案:

单选按钮：

复选框