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);
    };

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

4 个答案: