0

我正在尝试使用单选按钮制作一个表单，根据第一个问题中的选择显示不同的问题。

在第一个问题中选择一个选项时，第二个问题显示正常。但是当你改变第一个问题的答案时，第二个问题并没有隐藏。

例如：您有一个带有两个选项的单选按钮：* 汽车 * 自行车

当您单击“汽车”时，会出现关于汽车的第二个问题。但是当用户出错并将单选按钮更改为“自行车”时。关于自行车节目的第二个问题，但关于汽车的问题并没有隐藏，两者都在显示。

function ShowCar() {
  document.getElementById('DivCar').style.display = "";
  document.getElementById('IpCar').disabled = false;

  document.getElementById('DivBike').style.display = "none";
  document.getElementById('IpBike').disabled = true;
}

function ShowBike() {
  document.getElementById('DivBike').style.display = "";
  document.getElementById('IpBike').disabled = false;

  document.getElementById('DivCar').style.display = "none";
  document.getElementById('IpCar').disabled = true;
}
<div id="prod">
  <table width="600" border="0" cellspacing="0" cellpadding="5">
    <tr>
      <td>Car or Bike?</td>
      <td>
        <form>
          <input type="radio" name="product" id="Car" value="Car" onChange="ShowCar()" /> Car<br>
          <input type="radio" name="product" id="Bike" value="Bike" onChange="ShowBike()" /> Bike<br>
        </form>
      </td>
    </tr>
  </table>
</div>
<br />
<div id="DivCar" style="display:none">
  <table width="600" border="0" cellspacing="0" cellpadding="5">
    <tr>
      <td>What type of car is it?</td>
      <td>
        <form>
          <input type="radio" name="IpCar" value="Car_Sedan"> Sedan<br>
          <input type="radio" name="IpCar" value="Car_Truck"> Truck<br>
        </form>
      </td>
    </tr>
  </table>
</div>
<br />
<div id="DivBike" style="display:none">
  <table width="600" border="0" cellspacing="0" cellpadding="5">
    <tr>
      <td>What type of bike is it?</td>
      <td>
        <form>
          <input type="radio" name="IpBike" value="Bike_Sports"> Sports<br>
          <input type="radio" name="IpBike" value="Bike_Chopper"> Chopper<br>
        </form>
      </td>
    </tr>
  </table>
</div>
<br />

4

3 回答 3

3

您的显示/隐藏方法没问题，但是设置/删除disabled属性会引起问题。

您正在尝试通过ID(IpBike, IpCar) 选择不再存在的 HTML 元素。您有名称为的无线电输入字段IpBike, IpCar。

所以getElementById你可以使用querySelectorAll()

示例代码：

function ShowCar()
{
    document.getElementById('DivCar').style.display = "";
    Array.from(document.querySelectorAll('input[name="IpCar"]')).forEach(i => i.removeAttribute('disabled'));

    document.getElementById('DivBike').style.display = "none";
    Array.from(document.querySelectorAll('input[name="IpBike"]')).forEach(i => i.setAttribute('disabled', 'disabled'));

}

function ShowBike()
{
    document.getElementById('DivBike').style.display = "";
    Array.from(document.querySelectorAll('input[name="IpBike"]')).forEach(i => i.removeAttribute('disabled'));

    document.getElementById('DivCar').style.display = "none";
    Array.from(document.querySelectorAll('input[name="IpCar"]')).forEach(i => i.setAttribute('disabled', 'disabled'));
}
<body>
<div id="prod">
    <table width="600" border="0" cellspacing="0" cellpadding="5">
        <tr>
            <td>Car or Bike?</td>
            <td><form>
                <input type="radio" name="product" id="Car" value="Car" onChange="ShowCar()" /> Car<br>
                <input type="radio" name="product" id="Bike" value="Bike" onChange="ShowBike()" /> Bike<br>
            </form></td>
        </tr>
    </table>
</div>
<br />
<div id="DivCar" style="display:none">
    <table width="600" border="0" cellspacing="0" cellpadding="5">
        <tr>
            <td>What type of car is it?</td>
            <td><form>
                <input type="radio" name="IpCar" value="Car_Sedan"> Sedan<br>
                <input type="radio" name="IpCar" value="Car_Truck"> Truck<br>
            </form></td>
        </tr>
    </table>
</div>
<br />
<div id="DivBike" style="display:none">
    <table width="600" border="0" cellspacing="0" cellpadding="5">
        <tr>
            <td>What type of bike is it?</td>
            <td><form>
                <input type="radio" name="IpBike" value="Bike_Sports"> Sports<br>
                <input type="radio" name="IpBike" value="Bike_Chopper"> Chopper<br>
            </form></td>
        </tr>
    </table>
</div>

于 2019-09-05T11:27:06.880 回答
1

如果您只想一次显示一个选择，那么您不需要做额外的事情。点击汽车时只需隐藏自行车，如果点击自行车则隐藏汽车。并且您尝试使用错误的选择器禁用该属性。

document.getElementById('IpBike').disabled = true;

应该

document.getElementById('Bike').disabled = true;

和

document.getElementById('IpCar').disabled = true;

应该

document.getElementById('Car').disabled = true;

尝试以下操作：

<body>
<div id="prod">
  <table width="600" border="0" cellspacing="0" cellpadding="5">
    <tr>
      <td>Car or Bike?</td>
      <td><form>
        <input type="radio" name="product" id="Car" value="Car" onChange="ShowCar()" /> Car<br>
        <input type="radio" name="product" id="Bike" value="Bike" onChange="ShowBike()" /> Bike<br>
      </form></td>
    </tr>
  </table>
</div>
<br />
<div id="DivCar" style="display:none">
  <table width="600" border="0" cellspacing="0" cellpadding="5">
    <tr>
      <td>What type of car is it?</td>
      <td><form>
        <input type="radio" name="IpCar" value="Car_Sedan"> Sedan<br>
        <input type="radio" name="IpCar" value="Car_Truck"> Truck<br>
      </form></td>
    </tr>
  </table>
</div>
<br />
<div id="DivBike" style="display:none">
    <table width="600" border="0" cellspacing="0" cellpadding="5">
      <tr>
        <td>What type of bike is it?</td>
        <td><form>
          <input type="radio" name="IpBike" value="Bike_Sports"> Sports<br>
          <input type="radio" name="IpBike" value="Bike_Chopper"> Chopper<br>
        </form></td>
      </tr>
    </table>
  </div>
  <br />
</body>

<script type="text/javascript">

  function ShowCar()
  {
    document.getElementById('DivCar').style.display = "";
    document.getElementById('DivBike').style.display = "none";
    document.getElementById('Bike').disabled = true;// Use this line if you want to disable bike selection. Otherwise remove this line.
  }

  function ShowBike()
  {
    document.getElementById('DivBike').style.display = "";
    document.getElementById('DivCar').style.display = "none";
    document.getElementById('Car').disabled = true;// Use this line if you want to disable car selection. Otherwise remove this line.
  }

</script>

于 2019-09-05T11:18:03.803 回答
0 
function ShowCar() {

document.getElementById('DivCar').style.display = "";

document.getElementById('DivBike').style.display = "none"; }

函数 ShowBike() { document.getElementById('DivBike').style.display = "";

document.getElementById('DivCar').style.display = "none"; }

于 2019-09-05T11:52:20.737 回答