Perform certain action when radio button is checked

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>