如何在HTML5中制作特定单选按钮,并在手动添加数据时自动选择“指定”

时间:2018-05-10 08:07:07

标签: html html5 forms frontend web-frontend

我正在开发一个Web界面,用于以这样一种方式获取输入,即想象有三个具有特定功能的单选按钮,其中一个无线电输入功能也随之输入数字。看看例子:

<h2>How many cars you own?</h2>

<form>
<input type="radio" name="car" checked>One<br>
<input type="radio" name="car">Two<br>
<input type="radio" name="car">Specify
<input type="number" name="car"><br>
</form>

实际上这有效,但我希望我的网站更加智能和动态,所以主要问题是当我从Choose中选择一个数字时,它应该会自动标记Specify单选按钮,但它不会't 。如果我选​​择一个或两个作为我的选择,它应该禁用带有空白界面的数字输入。

1 个答案:

答案 0 :(得分:0)

我想你想要这样的东西

var cars = document.getElementsByName("car");

cars[3].addEventListener("input", function(e) {

  if (e.target.value < 1) {
    e.target.value = 1;
  }

  if (e.target.value === 1) {
    cars[2].checked = true;
  } else {
    cars[e.target.value - 1].checked = true;
  }

});
<h2>How many cars you own?</h2>

<form>
  <input type="radio" name="car" checked>One<br>
  <input type="radio" name="car">Two<br>
  <input type="radio" name="car">Specify
  <input type="number" name="car" value="1"><br>
</form>