尝试输出表格列表中单选按钮的值

Question

因此我试图将单选按钮的值输出到表中，但是无论我选择什么，它都只是说0，然后很快消失。 我希望结果保持不变，但有点像一个垂直列表，所以它看起来像是：0 1 2 1，等等。

 function display() { document.getElementById("displayarea").innerHTML = document.getElementById("dis1").value; document.getElementById("dis1").value = "0"; document.getElementById("displayarea1").innerHTML = document.getElementById("som1").value; document.getElementById("som1").value = "1"; document.getElementById("displayarea").innerHTML = document.getElementById("stron1").value; document.getElementById("stron1").value = "2"; } 

所以这只是一些脚本，因为它很长，我敢肯定有一种更简单的方法，但是我是JavaScript的新手。 每个单选按钮可以是dis，som或stron，范围是1到6。

  <table width="400px" align="center" border=0> <tr style="background-color:#8FBC8F;"> <td align="center"><b>Results</b></td> </tr> <tr> <td align="center"><div id="displayarea"></div></td> </tr> </table> 

就像我说过的那样，它一直输出到0并很快消失。 就像正在读取所有值为0的值一样。

  <label>I have trouble falling asleep or sleeping too much</label> <fieldset class="options2"> <input type="radio" name="dis2" id="dis2" value="0"/> <label>Strongly disagree</label> <input type="radio" name="som2" id="som2" value="1"/> <label>Somewhat agree</label> <input type="radio" name="stron2" id="stron2" value="2"/> <label>Strongly agree</label> </fieldset> 

这是一个按钮字段集的示例。 感谢您的帮助。 我的主要重点是让它停止将所有按钮字段读取为0并很快消失。

抱歉，我忽略了这些按钮处于单击提交按钮时运行的形式。 <input type="submit" id="submit" value="submit" onClick="display()"/></td>

另一个编辑：整个表格

<form id="dep" name="dep">

<fieldset id="depfield">    
<label>I've lost my enthusiasm for life</label>
    <fieldset class="options1">
        <input type="radio" name="dis1" id="dis1" value="0"/>
        <label>Strongly disagree</label>
        <input type="radio" name="som1" id="som1" value="1"/>
        <label>Somewhat agree</label>
        <input type="radio" name="stron1" id="stron1" value="2"/>
        <label>Strongly agree</label>   
    </fieldset>

  <label>I have trouble falling asleep or sleeping too much</label>
    <fieldset class="options2">
        <input type="radio" name="dis2" id="dis2" value="0"/>
        <label>Strongly disagree</label>
        <input type="radio" name="som2" id="som2" value="1"/>
        <label>Somewhat agree</label>
        <input type="radio" name="stron2" id="stron2" value="2"/>
        <label>Strongly agree</label>   
    </fieldset>

     <label>I have suicidal thoughts</label>
    <fieldset class="options3">
        <input type="radio" name="dis3" id="dis3" value="0"/>
        <label>Strongly disagree</label>
        <input type="radio" name="som3" id="som3" value="1"/>
        <label>Somewhat agree</label>
        <input type="radio" name="stron3" id="stron3" value="2"/>
        <label>Strongly agree</label>   
    </fieldset>

     <label>I tend to over-eat or eat too little</label>
    <fieldset class="options4">
        <input type="radio" name="dis4" id="dis4" value="0"/>
        <label>Strongly disagree</label>
        <input type="radio" name="som4" id="som4" value="1"/>
        <label>Somewhat agree</label>
        <input type="radio" name="stron4" id="stron4" value="2"/>
        <label>Strongly agree</label>   
    </fieldset>

     <label>I often feel very emotional and upset</label>
    <fieldset class="options5">
        <input type="radio" name="dis5" id="dis5" value="0"/>
        <label>Strongly disagree</label>
        <input type="radio" name="som5" id="som5" value="1"/>
        <label>Somewhat agree</label>
        <input type="radio" name="stron5" id="stron5" value="2"/>
        <label>Strongly agree</label>   
    </fieldset>

    <label>I don't put in as much effort as I used to</label>
    <fieldset class="options6">
        <input type="radio" name="dis6" id="dis6" value="0"/>
        <label>Strongly disagree</label>
        <input type="radio" name="som6" id="som6" value="1"/>
        <label>Somewhat agree</label>
        <input type="radio" name="stron6" id="stron6" value="2"/>
        <label>Strongly agree</label>   
    </fieldset> 
</fieldset>
<p>
<input type="submit" id="submit" value="submit" onClick="display()"/></td>
</p>
</form>

Answer 1

对于单选按钮，每个元素应具有相同的名称，否则将无法正常工作

例如：

<fieldset class="options2">

    <input type="radio" name="nameofradiobutton" id="dis2" value="0"/>
    <label>Strongly disagree</label>
    <input type="radio" name="nameofradiobutton" id="som2" value="1"/>
    <label>Somewhat agree</label>
    <input type="radio" name="nameofradiobutton" id="stron2" value="2"/>
    <label>Strongly agree</label>   

</fieldset>

Answer 2

您不需要单独的ID，只需将name属性设为相同即可将它们作为一个组。 您可以使用querySelectorAll()选择所有单选，然后使用map()获取所有值。 最后join()他们：

 function display(){ var el = [...document.querySelectorAll('input[type=radio]')]; el = el.map(r => r.value).join(' '); document.getElementById("displayarea").textContent = el; } 

 <table width="400px" align="center" border=0> <tr style="background-color:#8FBC8F;"> <td align="center"><b>Results</b></td> </tr> <tr> <td align="center"><div id="displayarea"></div></td> </tr> </table> <form id="dep" name="dep"> <fieldset id="depfield"> <label>I've lost my enthusiasm for life</label> <fieldset class="options1"> <input type="radio" name="dis1" id="dis1" value="0"/> <label>Strongly disagree</label> <input type="radio" name="som1" id="som1" value="1"/> <label>Somewhat agree</label> <input type="radio" name="stron1" id="stron1" value="2"/> <label>Strongly agree</label> </fieldset> <label>I have trouble falling asleep or sleeping too much</label> <fieldset class="options2"> <input type="radio" name="dis2" id="dis2" value="0"/> <label>Strongly disagree</label> <input type="radio" name="som2" id="som2" value="1"/> <label>Somewhat agree</label> <input type="radio" name="stron2" id="stron2" value="2"/> <label>Strongly agree</label> </fieldset> <label>I have suicidal thoughts</label> <fieldset class="options3"> <input type="radio" name="dis3" id="dis3" value="0"/> <label>Strongly disagree</label> <input type="radio" name="som3" id="som3" value="1"/> <label>Somewhat agree</label> <input type="radio" name="stron3" id="stron3" value="2"/> <label>Strongly agree</label> </fieldset> <label>I tend to over-eat or eat too little</label> <fieldset class="options4"> <input type="radio" name="dis4" id="dis4" value="0"/> <label>Strongly disagree</label> <input type="radio" name="som4" id="som4" value="1"/> <label>Somewhat agree</label> <input type="radio" name="stron4" id="stron4" value="2"/> <label>Strongly agree</label> </fieldset> <label>I often feel very emotional and upset</label> <fieldset class="options5"> <input type="radio" name="dis5" id="dis5" value="0"/> <label>Strongly disagree</label> <input type="radio" name="som5" id="som5" value="1"/> <label>Somewhat agree</label> <input type="radio" name="stron5" id="stron5" value="2"/> <label>Strongly agree</label> </fieldset> <label>I don't put in as much effort as I used to</label> <fieldset class="options6"> <input type="radio" name="dis6" id="dis6" value="0"/> <label>Strongly disagree</label> <input type="radio" name="som6" id="som6" value="1"/> <label>Somewhat agree</label> <input type="radio" name="stron6" id="stron6" value="2"/> <label>Strongly agree</label> </fieldset> </fieldset> <p> <input type="button" id="submit" value="submit" onClick="display()"/> </p> </form> 

如果要获取无线电更改时的值，请尝试以下操作：

 document.querySelectorAll('input[name=asleep]').forEach(function(el){ el.addEventListener('change', display); }); function display(){ document.getElementById("displayarea").textContent = this.value; } 

 <table width="400px" align="center" border=0> <tr style="background-color:#8FBC8F;"> <td align="center"><b>Results</b></td> </tr> <tr> <td align="center"><div id="displayarea"></div></td> </tr> </table> <label>I have trouble falling asleep or sleeping too much</label> <fieldset class="options2"> <input type="radio" name="asleep" value="0"/> <label>Strongly disagree</label> <input type="radio" name="asleep" value="1"/> <label>Somewhat agree</label> <input type="radio" name="asleep" value="2"/> <label>Strongly agree</label> </fieldset> 

Answer 3

您的主要问题是您的form正在提交，因此网站被重新加载->所有值都消失了。

要解决此问题，您可以将按钮的type="submit"更改为type="button"或像在我的示例中一样使用event.preventDefault() 。

您还可以将脚本缩短为以下形式：

 function display(event) { // Need "event" to access prevenDefault(); event.preventDefault(); // This line prevents the form from submitting, so your values stay visible after clicking the button var radios = [...document.querySelectorAll('input[type=radio]')]; // Get all your radio buttons at once var displayarea = document.getElementById('displayarea'); var values = radios.map(radio => radio.value).join(' '); // Get all values of your radios and concat them in a string displayarea.innerText = values; } 

 <form id="dep" name="dep"> <fieldset id="depfield"> <label>I've lost my enthusiasm for life</label> <fieldset class="options1"> <input type="radio" name="dis1" id="dis1" value="0" /> <label>Strongly disagree</label> <input type="radio" name="som1" id="som1" value="1" /> <label>Somewhat agree</label> <input type="radio" name="stron1" id="stron1" value="2" /> <label>Strongly agree</label> </fieldset> <label>I have trouble falling asleep or sleeping too much</label> <fieldset class="options2"> <input type="radio" name="dis2" id="dis2" value="0" /> <label>Strongly disagree</label> <input type="radio" name="som2" id="som2" value="1" /> <label>Somewhat agree</label> <input type="radio" name="stron2" id="stron2" value="2" /> <label>Strongly agree</label> </fieldset> <label>I have suicidal thoughts</label> <fieldset class="options3"> <input type="radio" name="dis3" id="dis3" value="0" /> <label>Strongly disagree</label> <input type="radio" name="som3" id="som3" value="1" /> <label>Somewhat agree</label> <input type="radio" name="stron3" id="stron3" value="2" /> <label>Strongly agree</label> </fieldset> <label>I tend to over-eat or eat too little</label> <fieldset class="options4"> <input type="radio" name="dis4" id="dis4" value="0" /> <label>Strongly disagree</label> <input type="radio" name="som4" id="som4" value="1" /> <label>Somewhat agree</label> <input type="radio" name="stron4" id="stron4" value="2" /> <label>Strongly agree</label> </fieldset> <label>I often feel very emotional and upset</label> <fieldset class="options5"> <input type="radio" name="dis5" id="dis5" value="0" /> <label>Strongly disagree</label> <input type="radio" name="som5" id="som5" value="1" /> <label>Somewhat agree</label> <input type="radio" name="stron5" id="stron5" value="2" /> <label>Strongly agree</label> </fieldset> <label>I don't put in as much effort as I used to</label> <fieldset class="options6"> <input type="radio" name="dis6" id="dis6" value="0" /> <label>Strongly disagree</label> <input type="radio" name="som6" id="som6" value="1" /> <label>Somewhat agree</label> <input type="radio" name="stron6" id="stron6" value="2" /> <label>Strongly agree</label> </fieldset> </fieldset> <p> <input type="submit" id="submit" value="submit" onClick="display(event)" /></td> <!-- Need "event" to access preventDefault();" --> </p> </form> <table width="400px" align="center" border=0> <tr style="background-color:#8FBC8F;"> <td align="center"><b>Results</b></td> </tr> <tr> <td align="center"> <div id="displayarea"></div> </td> </tr> </table> 

Answer 4

向单选按钮添加一个onchange事件

  <label>I have trouble falling asleep or sleeping too much</label> <fieldset class="options2"> <input type="radio" name="r" value="0" onchange="showVal(this)"/> <label>Strongly disagree</label> <input type="radio" name="r" value="1" onchange="showVal(this)"/> <label>Somewhat agree</label> <input type="radio" name="r" value="2" onchange="showVal(this)"/> <label>Strongly agree</label> </fieldset> 

然后编写一个javascript函数来显示或执行任何操作

  function showVal(radio) { // possible things you may do, below are examples alert(radio.value); alert(radio.checked); };