代码之家 › 专栏 › 技术社区 › HashSu

单选按钮值正在打印“on”,而不是它所保存的值

html javascript

HashSu · 技术社区 · 7 年前

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 回复 | 直到 7 年前

Dacre Denny 7 年前

如果我正确地理解了你的问题,那么实现你的要求的一个选择就是通过 querySelectorAll() 和 getAttribute() 方法。

首先,将以下选择器传递给要获取选中的所有无线电输入元素:

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

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

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>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前