Question

我正在尝试制作一个带有单选按钮的表格，该单选按钮根据第一个问题的选择显示一个不同的问题。

在第一个问题中选择一个选项时，第二个问题显示正常。但是，当您更改第一个问题的答案时，第二个问题不会隐藏。

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

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

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 />

Answer 1

您的显示/隐藏方法还可以，但是设置/删除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>

Answer 2

如果您只想一次显示一个选择，则无需执行其他操作。单击汽车时仅隐藏自行车，如果单击汽车则隐藏汽车。而您尝试使用错误的选择器禁用该属性。

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>

Answer 3

function ShowCar() {

document.getElementById（'DivCar'）。style.display =“”;

document.getElementById（'DivBike'）。style.display =“ none”; }

function ShowBike（）{ document.getElementById（'DivBike'）。style.display =“”;

document.getElementById（'DivCar'）。style.display =“ none”; }

单击单选按钮时div不隐藏

3 个答案: