CODEWITHSUNDEEP
jquery
user9165955
user9165955

Reputation:

show div when radio button is checked is not working

I have some radio buttons. The radio button with id "showSelect" is checked by default and when the radio button with id "showSelect" is selected I want to show a div with class ".div", otherwise i want to hide the div with class ".div". I have the code below to this, but its not working, the div with class ".div" appaers by default but then if I select other radio button the div with class ".dive" is not hidden.

//form with radio buttons

 <div class="form-row">
    <div class="form-group">
      <div class="form-check">
        <input id="showSelect"  class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" checked value="option1">
        <label class="form-check-label" for="exampleRadios1">
          Item 1
        </label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1"  value="option1">
        <label class="form-check-label" for="exampleRadios1">
          Item 2
        </label>
      </div>
    </div>
  </div>

// div with class .div

 <div class="form-row div">
    <div class="form-group">
      <label for="exampleFormControlSelect2">Select</label>
      <select class="form-control" id="">
        <option selected class="selected">Item 1</option>
        <option>Item 2</option>
        <option >Item 3</option>
      </select>
    </div>
  </div>

//css

.div{
  display:none;
}

//js

        if ($('#showSelect').prop('checked')) {
            $('.div').show();
        } else {
            $('.div').hide();
        }

Upvotes: 0

Views: 3849

Answers (2)

jwaw
jwaw

Reputation: 1

You need to check the value of the ID on every Div on change state, also since your defaut checked radio button is showSelect you should let your div on display block:

<div class="form-row">
  <div class="form-group">
    <div class="form-check">
      <input id="showSelect"  class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" checked value="option1">
      <label class="form-check-label" for="exampleRadios1">
        Item 1
      </label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1"  value="option1">
      <label class="form-check-label" for="exampleRadios1">
        Item 2
      </label>
    </div>
  </div>
</div>
<div class="form-row div">
    <div class="form-group">
      <label for="exampleFormControlSelect2">Select</label>
      <select class="form-control" id="">
        <option selected class="selected">Item 1</option>
        <option>Item 2</option>
        <option >Item 3</option>
      </select>
    </div>
</div>
  <style>
    .div{
      display:block;
    }
  </style>
  <script type="text/javascript">
        jQuery(document).ready(function($){
           $('input[type=radio]').each(function(){

             $(this).on('change', function() {

              //console.log($(this).attr('id'))

             if($(this).attr('id')=='showSelect') {

                      $('.div').show();      
                  } else {

                      $('.div').hide();

                  }
            });
           })
      });
  </script>

Upvotes: 0

Snowmonkey
Snowmonkey

Reputation: 3761

This listens for a click on any of the radio buttons, then checks the status of the desired radio button and toggles the hidden class. But your show/hide functionality must be called inside some sort of handler. 

// Listen for any radio buttons at the form-check
//  level being clicked.
$(".form-check input[type='radio']").on("change", function() {
  // Regardless of WHICH radio was clicked, is the
  //  showSelect radio active?
   if ($("#showSelect").is(':checked')) {
     $('.div').removeClass("hidden");
   } else {
     $('.div').addClass("hidden");
   }
 })
.hidden {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-row">
  <div class="form-group">
    <div class="form-check">
      <input id="showSelect" class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" checked value="option1">
      <label class="form-check-label" for="exampleRadios1">
        Item 1
      </label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1">
      <label class="form-check-label" for="exampleRadios1">
        Item 2
      </label>
    </div>
  </div>
</div>

<div class="form-row div">
  <div class="form-group">
    <label for="exampleFormControlSelect2">Select</label>
    <select class="form-control" id="">
      <option selected class="selected">Item 1</option>
      <option>Item 2</option>
      <option>Item 3</option>
    </select>
  </div>
</div>

Upvotes: 1

Related Questions