Question

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

我的HTML是这样的：

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

这就是我在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();
});

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

如果我点击第一个按钮，然后点击其第二个按钮。

有谁能告诉我如何解决这个问题？谢谢。

Answer 1

您可以使用:checked伪类（除了现有的事件处理程序）检查页面加载时选中的按钮：

＆＃13;

if ($('input[type="radio"][name="b_type"]:checked').val() == 1) {
  $('#person-block').show();
} else {
  $('#institute-block').show();
}

＆＃13;

.block {
  display: none;
}

＆＃13;

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

＆＃13;

此外，我建议隐藏两个元素，以避免在加载JS之前显示两者的内容。

Answer 2

只需在document.ready

中的元素中触发change事件

注意：你有一些id错字。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

使用.is（＆＃39;：已检查＆＃39;）

if($('#myradiobutton').is(':checked')){
 // this
}else{
 // that
}

Answer 5

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

Answer 6

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

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

6 个答案: