CODEWITHSUNDEEP
javascriptjquery
Denis Omerovic
Denis Omerovic

Reputation: 1440

Perform certain action when radio button is checked

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>

Upvotes: 1

Views: 72

Answers (4)

shaishav shukla
shaishav shukla

Reputation: 368

Please check my code it might help you

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

Upvotes: 0

Pete
Pete

Reputation: 58412

No need for javascript for this, you can do this with 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>

Upvotes: 3

Mark Baijens
Mark Baijens

Reputation: 13222

This should do the trick.

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

Upvotes: 0

Himanshu Upadhyay
Himanshu Upadhyay

Reputation: 6565

Do this way:

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

Upvotes: 0

Related Questions