javascript - 选中单选按钮时执行特定操作

Question

如何仅在选中该单选按钮时在单选按钮下方显示带有类 searchFilter 的输入并隐藏所有其他 .searchFilter 输入？

<ul class="filters">
  <li class="submenu">Check one
    <div class="details">
      <form>
        <div class="filter-option">
          <input type="radio" id="example" name="role" checked/>
          <label for="example">Example</label>
          <input type="text" class="searchFilter">
        </div>
        <div class="filter-option">
          <input type="radio" id="example" name="role" checked/>
          <label for="example">Example</label>
          <input type="text" class="searchFilter">
        </div>
      </form>
    </div>
  </li>
  <li class="submenu">Check two
    <div class="details">
      <form>
        <div class="filter-option">
          <input type="radio" id="example" name="role" checked/>
          <label for="example">Example</label>
          <input type="text" class="searchFilter">
        </div>
        <div class="filter-option">
          <input type="radio" id="example" name="role" checked/>
          <label for="example">Example</label>
          <input type="text" class="searchFilter">
        </div>
      </form>
    </div>
  </li>
</ul>

Answer 1

这不需要javascript，你可以用css做到这一点:

.searchFilter {
  display: none;
  /* hide search filters */
}

input[type=radio]:checked~.searchFilter {
  display: block;
  /* show filters that appear after a checked input */
}

<ul class="filters">
  <li class="submenu">Check one
    <div class="details">
      <form>
        <div class="filter-option">
          <input type="radio" id="example" name="role" checked/>
          <label for="example">Example</label>
          <input type="text" class="searchFilter">
        </div>
        <div class="filter-option">
          <input type="radio" id="example1" name="role" checked/>
          <label for="example1">Example</label>
          <input type="text" class="searchFilter">
        </div>
      </form>
    </div>
  </li>
  <li class="submenu">Check two
    <div class="details">
      <form>
        <div class="filter-option">
          <input type="radio" id="example2" name="role" checked/>
          <label for="example2">Example</label>
          <input type="text" class="searchFilter">
        </div>
        <div class="filter-option">
          <input type="radio" id="example3" name="role" checked/>
          <label for="example3">Example</label>
          <input type="text" class="searchFilter">
        </div>
      </form>
    </div>
  </li>
</ul>