doubi3929
2018-05-25 11:23
浏览 1.0k
已采纳

根据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.

图片转代码服务由CSDN问答提供 功能建议

我试图根据jquery中的单选按钮选择显示不同的内容。

我的HTML是这样的:

 &lt; div class =“col-sm-5”&gt; 
&lt;  label class =“radio-inline”&gt; 
&lt; input type =“radio”name =“b_type”value =“1”&lt;?=(isset($ type)&amp;&amp; $ type =='Person  ')?  '已':''?&gt;&gt;  Person 
&lt; / label&gt; 
&lt; label class =“radio-inline”&gt; 
&lt; input type =“radio”name =“b_type”value =“2”&lt;?=(isset($  type)&amp;&amp; $ type =='Institute')?  '已':''?&gt;&gt;  Institute 
&lt; / label&gt; 
&lt; / div&gt; 
   
 
 

这是我在jquery中尝试为每个单选按钮选择显示两个不同内容的方法。

  $('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(); 
}); 
  <  / pre> 
 
 

此代码以某种方式工作。 但有一个问题。 默认单选按钮 checked 是动态的。 假设在页面加载时检查第二个按钮,然后显示#persion-block 内容。 但我想显示 #institute-block 内容。

如果我点击第一个按钮,然后点击它的第二个按钮。

有人可以告诉我如何解决这个问题吗? 谢谢。

  • 写回答
  • 好问题 提建议
  • 关注问题
  • 收藏
  • 邀请回答

6条回答 默认 最新

  • 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 2018-05-25 11:25

    use .is(':checked')

    if($('#myradiobutton').is(':checked')){
     // this
    }else{
     // that
    }
    
    评论
    解决 无用
    打赏 举报
  • 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 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 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 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>
    
    评论
    解决 无用
    打赏 举报