Question

How to show input with class searchFilter below radio button only when that radio button is checked and hide all the others .searchFilter inputs?

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

Answer 2

这样做：

$(document).ready(function(){
    $('input[type=radio]').on('change',function(){
        $('.searchFilter').hide();
        $('input[type=radio]:checked').next('.searchFilter:first').show();
    });
});

Answer 3

这应该可以解决问题。

$(document).ready(function(){
  $('.filter-option').children('input[type=radio]').on('change', function(){
    $(this).parents('.details').find('input[type=radio]').each(function(){
      $(this).is(':checked') ? $(this).siblings('.searchFilter').show() : $(this).siblings('.searchFilter').hide();
    });
  }).trigger('change');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="filters">

    <li class="submenu">Check one

        <div class="details">
                <form>
                    <div class="filter-option">               
                        <input type="radio" id="example1" name="role" checked/>
                        <label for="example">Example</label>
                        <input type="text" class="searchFilter">
                    </div>
                    <div class="filter-option">               
                        <input type="radio" id="example2" 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="example3" name="role" checked/>
                        <label for="example">Example</label>
                        <input type="text" class="searchFilter">
                    </div>
                    <div class="filter-option">               
                        <input type="radio" id="example4" name="role" checked/>
                        <label for="example">Example</label>
                        <input type="text" class="searchFilter">
                    </div>
                </form>
            </div>
        </li>
    </ul>

Answer 4

请检查我的代码，它可能对您有帮助

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
   //For first form
   //select last radiobutton as default   
   $("form").find(".searchFilter").attr("disabled",true).val("")
   $("form").find(".searchFilter").last().attr("disabled",false)    
   
   //On radiobuttion selection change
   $('input[type=radio]').on('change',function(){
       $("form").find(".searchFilter").attr("disabled",true).val("");
       $(this).siblings(".searchFilter").attr("disabled",false)
   });
});
</script>
</head>
<body>
<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>
        
    </ul>

</body>
</html>

Perform certain action when radio button is checked

4 个答案: