如何将输入单选值设为数字？ [复制]答案

【问题标题】：How make input radio value as number? [duplicate]如何将输入单选值设为数字？ [复制]
【发布时间】：2022-01-10 20:51:33
【问题描述】：

我正在尝试使用单选按钮进行算术运算（只是一个实验）

浏览器返回值 NaN

let num1 = parseInt(document.querySelectorAll('#number1:checked'));
let num2 = parseInt(document.querySelectorAll('#number2:checked'));

function addTambah() {
  result = num1 + num2;
  alert(result);
}

<p>number : </p>
<input type="radio" name="number1" id="number11" value="1">
<label for="radio">1</label>
<input type="radio" name="number1" id="number12" value="2">
<label for="radio">2</label>
<p> number 2 : </p>
<input type="radio" name="number2" id="number21" value="1">
<label for="radio">1</label>
<input type="radio" name="number2" id="number22" value="2">
<label for="radio">2</label>
<br>
<button type="button" onclick="addTambah()">Add</button>

【问题讨论】：

querySelectorAll 返回一个类似数组的节点列表。您不能在节点列表上 parseInt。请改用querySelector，特别是如果您要定位具有 id 的元素。
@Andy 一样，它的回报南
您的 ID 应该是唯一的
这是一个使用 ES6 的工作版本和推荐的方法jsfiddle.net/mplungjan/ro2891s4const checked = document.querySelectorAll('[name^=number]:checked'); const sum = checked.length ? [...checked].map(fld => +fld.value).reduce((a, b) => a + b) : 0;

标签： javascript html dom

【解决方案1】：

您需要获取函数内选中的单选按钮的值，其次每个 dom 元素都应该有唯一的 id。也使用querySelector 而不是querySelectorAll

function addTambah() {
  let add = document.querySelector('input[name="number1"]:checked').value;
  let add1 = document.querySelector('input[name="number2"]:checked').value;
  const result = parseInt(add, 10) + parseInt(add1, 10)
  alert(result);
}

<p>number : </p>
<input type="radio" checked name="number1" id="number1" value="1">
<label for="radio">1</label>
<input type="radio" name="number1" id="number2" value="2">
<label for="radio">2</label>
<p> number 2 : </p>
<input type="radio" name="number2" id="number3" value="1">
<label for="radio">1</label>
<input type="radio" checked name="number2" id="number4" value="2">
<label for="radio">2</label>
<br>
<button type="button" onclick="addTambah()">Add</button>

【讨论】：

是的，我只是意识到我的代码具有相同的 id
您的代码出错。您需要document.querySelector('input[name="number1"]:checked')?.value，因为 OP 允许在未检查任何内容时单击。反正是个大骗子
谢谢，你对我的代码在收音机没有点击时出错。再次感谢@mplungjan
@arcahyadi 使用checked 属性并默认选中