doubi3929
doubi3929
2018-05-25 11:23
浏览 680

根据jQuery中的单选按钮选择显示和隐藏内容

I am trying to display different contents base on radio button select in jquery.

My HTML is something like this:

<div class="col-sm-5">
  <label class="radio-inline">
    <input type="radio" name="b_type" value="1" <?=(isset($type) && $type == 'Person') ?  ' checked' : ''?>> Person
  </label>
  <label class="radio-inline">
    <input type="radio" name="b_type" value="2" <?=(isset($type) && $type == 'Institute') ?  ' checked' : ''?>> Institute
  </label>
</div>

This is how I tried in jquery to display two different contents for each radio button selection.

$('input[type="radio"][name="b_type"]').on('change',function(){
  var sel = $(this);
  if(sel.val() == 1){
    $('#person-block').show();
    $('#person-institute').show();
  }else{
    $('#institute-block').show();
    $('#person-block').hide();
});

This code is working in some way. But there is a problem. Default radio button checked is dynamic. Lets assume second button is checked when the page is loading, then it display #persion-block contents. But I want to display #institute-block contents.

If I click on first button and then click on second its working.

Can anybody tell me how to figure this out? Thank you.

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

6条回答 默认 最新

  • dth54864
    dth54864 2018-05-25 11:43
    已采纳

    Just trigger the change event in the element inside the document.ready

    Note : You have some id typo .

    $('input[type="radio"][name="b_type"]').on('change',function(){
    alert($(this).val());
      if($(this).val() == "1"){
        $('#person-block').show();
        $('#institute-block').hide();
      }else{
        $('#institute-block').show();
        $('#person-block').hide();
        }
    });
    
    $(document).ready(function(){
    $('input[type="radio"][name="b_type"]:checked').change();
    
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="col-sm-5">
      <label class="radio-inline">
        <input type="radio" name="b_type" value="1" > Person
      </label>
      <label class="radio-inline">
        <input type="radio" name="b_type" value="2" checked> Institute
      </label>
    </div>
    <div id="person-block" >
      Person
    </div>
    <div id="institute-block" >
      Institute
    </div>

    </div>
    
    点赞 评论
  • doucao8982
    doucao8982 2018-05-25 11:25

    use .is(':checked')

    if($('#myradiobutton').is(':checked')){
     // this
    }else{
     // that
    }
    
    点赞 评论
  • douzi7890
    douzi7890 2018-05-25 11:32

    You can check which button is checked on page load with the :checked pseudo class (additionally to your existing event handler):

    if ($('input[type="radio"][name="b_type"]:checked').val() == 1) {
      $('#person-block').show();
    } else {
      $('#institute-block').show();
    }
    .block {
      display: none;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="col-sm-5">
      <label class="radio-inline">
        <input type="radio" name="b_type" value="1" > Person
      </label>
      <label class="radio-inline">
        <input type="radio" name="b_type" value="2" checked> Institute
      </label>
    </div>
    <div id="person-block" class="block">
      Person
    </div>
    <div id="institute-block" class="block">
      Institute
    </div>

    Additionally I would recommend hiding both elements on default to avoid showing the content of both before the JS has been loaded.

    </div>
    
    点赞 评论
  • dongtaogou6226
    dongtaogou6226 2018-05-25 11:36

     $(document).ready(function () {
    
                $('input[type="radio"][name="b_type"]').on('change', function () {
    
                    var sel = $(this).filter(':checked').val();
                   
                    if (sel == 1) {
                        $('#person-block').show();
                        $('#institute-block').hide();
                    } else {
                        $('#institute-block').show();
                        $('#person-block').hide();
                    }
                });
            });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
     <div class="col-sm-5">
      <label class="radio-inline">
        <input type="radio" name="b_type" value="1" <?=(isset($type) && $type == 'Person') ?  ' checked' : ''?> Person
      </label>
      <label class="radio-inline">
        <input type="radio" name="b_type" value="2" <?=(isset($type) && $type == 'Institute') ?  ' checked' : ''?>Institute
      </label>
    </div>
     <div style="display:none" id="person-block"  class="block">
          Person
        </div>
        <div style="display:none" id="institute-block" class="block">
          Institute
        </div>

    </div>
    
    点赞 评论
  • dongzi0602
    dongzi0602 2018-05-25 11:39

    $("#redio1").click(function(){
        $('#person-block').css('display','block');
        $('#person-institute').css('display','block');
    })
    $("#redio2").click(function(){
        $('#institute-block').css('display','block');
        $('#person-block').css('display','none');
    })
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <div class="col-sm-5">
      <label class="radio-inline">
        <input type="radio" id="redio1" name="b_type" value="1" <?=(isset($type) && $type == 'Person') ?  ' checked' : ''?>> Person
      </label>
      <label class="radio-inline">
        <input type="radio" id="redio2" name="b_type" value="2" <?=(isset($type) && $type == 'Institute') ?  ' checked' : ''?>> Institute
      </label>
    </div>
    <div id="person-block" style="color:red;display:none;">person-block</div>
    <div id="person-institute" style="color:black;display:none;">person-institute</div>

    </div>
    
    点赞 评论
  • duanguoping2016
    duanguoping2016 2018-05-25 11:46

      $(document).ready(function () {
    
                $('input[type="radio"][name="b_type"]').on('change', function () {
    
                    var sel = $(this).filter(':checked').val();
                   
                    if (sel == 1) {
                        $('#person-block').show();
                        $('#institute-block').hide();
                    } else {
                        $('#institute-block').show();
                        $('#person-block').hide();
                    }
                });
            });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="col-sm-5">
      <label class="radio-inline">
        <input type="radio" name="b_type" value="1" > Person
      </label>
      <label class="radio-inline">
        <input type="radio" name="b_type" value="2" checked> Institute
      </label>
    </div>
     <div style="display:none" id="person-block"  class="block">
          Person
        </div>
        <div style="display:none" id="institute-block" class="block">
          Institute
        </div>

    </div>
    
    点赞 评论

相关推荐