Question

我有一些单选按钮。默认情况下会选中ID为“showSelect”的单选按钮，当选择ID为“showSelect”的单选按钮时，我想显示一个带有“.div”类的div，否则我想隐藏带有“.div”类的div 。我有下面的代码，但它没有工作，默认情况下，类“。div”的div为appaers，但如果我选择其他单选按钮，则不会隐藏带有“.dive”类的div。

//带有单选按钮的表单

 <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与类.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();
        }

Answer 1

这会侦听任何单选按钮上的单击，然后检查所需单选按钮的状态并切换隐藏的类。但是你的显示/隐藏功能必须在某种处理程序中调用。

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

Answer 2

你需要检查每个Div on change状态下ID的值，因为你的defaut checked单选按钮是showSelect你应该让你的div显示块：

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

选中单选按钮时显示div不起作用

2 个答案: