单选按钮的值打印为“ on”,而不是其保留的值

时间:2019-01-23 23:47:23

标签: javascript html

function perform_global(tablecounter) 
{
  for (index = 1; index <= 2; ++index) {
      var dnsname = "dns_name"+index;
      oRadio = document.getElementsByName(dnsname);

      alert (" radio ID " + dnsname + "  " + index + "length " + oRadio.length);
      for(var i = 0; i < oRadio.length; i++)
      {
        if(oRadio[i].checked)
        {
          alert( "Checked Value is " + oRadio[i].value );
        }
      }
    }
}
<form id=globe>
   <table id=x >
      <THEAD><TR>
      <TH> DNSNAME </TH>
      </TR> </THEAD>
      <TBODY id="tbody_1_1"> <TR>
      <TD>
        <input type='radio' name='dns_name1' value='service_name_xx' checked>  service_names_xx 
      </TD>

      <TD>
        <input type='radio' name='dns_name1' value='service_name_yy' >  service_name_yy  
      </TD>
     </TR></TBODY>
   </table>
   <table id=y>
     <THEAD><TR>
     <TH> DNSNAME </TH>
     </TR> </THEAD>
     <TBODY id="tbody_1_2"> <TR>
     <TD>
      <input type='radio' name='dns_name2' value='service_name_xxx' checked>  service_names_xxx 
     </TD>
      <TD>
        <input type='radio' name='dns_name2' value='service_name_yyy'>  service_name_yyy 

      </TD>
     </TR></TBODY>
    </table>
<button onclick="perform_global()">
</form>

1 个答案:

答案 0 :(得分:1)

如果我正确理解了您的问题,那么可以通过querySelectorAll()getAttribute()方法来实现您的要求。

首先,将以下选择器传递给querySelectorAll(),以获取所有已检查的单选输入元素:

querySelectorAll('input[type="radio"]:checked')

接下来,迭代此查询返回的匹配元素的列表,并通过value方法获取每个元素的相应name属性(和getAttribute()属性(如果需要)):< / p>

radio.getAttribute("value")

这些想法可以按如下方式组合在一起:

function perform_global(event) {

  // Prevent button from submitting
  event.preventDefault();

  // Use querySelectorAll to select radio elements that are checked
  for (let radio of document.querySelectorAll(`input[type="radio"]:checked`)) {

    // Use getAttribute to aquire value attribute for checked radio
    console.log("Checked group:" + radio.getAttribute("name") + ", value:" + radio.getAttribute("value"));
  }
}
<form id=globe>
  <table id=x>
    <TH> DNSNAME </TH>
    <TD>
      <input type='radio' name='dns_name1' value='service_name_xx' checked> service_names_xx
    </TD>
    <TD>
      <input type='radio' name='dns_name1' value='service_name_yy'> service_name_yy
    </TD>
  </table>
  <table id=y>
    <TH> DNSNAME </TH>
    <TD>
      <input type='radio' name='dns_name2' value='service_name_xx' checked> service_names_xx
    </TD>
    <TD>
      <input type='radio' name='dns_name2' value='service_name_yy'> service_name_yy
    </TD>
  </table>
  <!-- Pass event to onclick handler -->
  <button onclick="perform_global(event)">Button</button>
</form>