Question

我有3个单选按钮：

津贴
学费
学校

如果我点击单选按钮以进行限额，它将打开ul列表。

现在，点击学费的单选按钮

后，应关闭津贴单选按钮

单击单选按钮以显示＆＃34;未完全学费＆＃34;时，我应该输入Money的文本字段，但它会在其上打开。

我想在点击＆＃34; Not Full Tition Fee＆＃34;之后阻止它关闭。所以我可以在Money文本字段中输入一个值。

如果我点击学校的单选按钮，它也会关闭。

我怎样才能让它发挥作用？

＆＃13;

function Allowance(select) {
  if (select.value == 'Allowance') {
    document.getElementById('allowance').style.display = "block";
  } else {
    document.getElementById('allowance').style.display = "none";
  }
}

function Tuition(select) {
  if (select.value == 'Tuition Fee') {
    document.getElementById('tuition_fee').style.display = "block";
  } else {
    document.getElementById('tuition_fee').style.display = "none";
  }
}

function Supply(select) {
  if (select.value == 'School Supply') {
    document.getElementById('school_supply').style.display = "block";
  } else {
    document.getElementById('school_supply').style.display = "none";
  }
}

function Not_Full(select) {
  if (select.value == 'Not Full') {
    document.getElementById('Not_Full').style.display = "block";
  } else {
    document.getElementById('Not_Full').style.display = "none";
  }
}

＆＃13;

<input type="radio" name="ship_need" value="Allowance" id="test" onchange="Allowance(this)"> Allowance<br>
<div id="allowance" style="display: none;">
  <ul>
    <li>Food Allowance</li>
    <li>Transportation Allowance</li>
  </ul>
  <label class="control-label">Money:</label>
  <input type="text">
</div>
<input type="radio" name="ship_need" value="Tuition Fee" id="test" onchange="Tuition(this)"> Tution<br>
<div id="tuition_fee" style="display: none;">
  <ul>
    <li>Tuition Fee</li>
    <input type="radio" name="test1" value="Full"> Full Tuition Fee<br>
    <input type="radio" name="test1" value="Not Full" id="test" onchange="Not_Full(this)"> Not Full Tuition Fee<br>
  </ul>
  <div id="Not_Full" style="display: none;">
    <label class="control-label">Money:</label>
    <input type="text">
  </div>

</div>
<input type="radio" name="ship_need" value="School Supply" id="test" onchange="Supply(this)"> School
<div id="school_supply" style="display: none;">
  <ul>
    <li>Books</li>
    <li>Uniform</li>
  </ul>
  <label class="control-label">Money:</label>
  <input type="text">
</div>

＆＃13;

Answer 1

它不起作用，因为单击输入时每个函数只调用一次。单击另一个时，您需要隐藏显示的那些。

这是一个修改过的例子

function expand(element) {
  // collapse all div.expandable
  Array.from(document.getElementsByClassName('expandable'))
    .forEach(function(div) {
      div.style.display = "none";
    });

  // expand the one coresponding to the clicked input
  document.getElementById(element.id.toLowerCase()).style.display = "block";
}

li {
  list-style: none;
}

<li>
  <input type="radio" name="ship_need" value="Allowance" id="Allowance" onchange="expand(this)">
  <label for="Allowance">Allowance</label>
  <div class="expandable" id="allowance" style="display: none;">
    <ul>
      <li>Food Allowance</li>
      <li>Transportation Allowance</li>
    </ul>
    <label class="control-label">Money:</label>
    <input type="text">
  </div>
</li>

<li>
  <input type="radio" name="ship_need" value="Tuition Fee" id="Tuition" onchange="expand(this)">
  <label for="Tuition">Tuition</label>
  <div class="expandable" id="tuition" style="display: none;">
    <ul>
      <li>Tuition Fee</li>
      <input type="radio" name="test1" value="Full"> Full Tuition Fee<br>
      <input type="radio" name="test1" value="Not Full" id="test" onchange="Not_Full(this)"> Not Full Tuition Fee<br>
    </ul>
    <div id="Not_Full" style="display: none;">
      <label class="control-label">Money:</label>
      <input type="text">
    </div>
  </div>
</li>

<li>
  <input type="radio" name="ship_need" value="School Supply" id="School" onchange="expand(this)">
  <label for="School">School</label>
  <div class="expandable" id="school" style="display: none;">
    <ul>
      <li>Books</li>
      <li>Uniform</li>
    </ul>
    <label class="control-label">Money:</label>
    <input type="text">
  </div>
</li>

单选按钮带有附加文本字段javascript

1 个答案: