Question

我只是想知道是否有更有效的做事方式。我有以下html

<div class="form-group">
    <div class="col-md-6">
        <label class="radio-inline"><input type="radio" name="optradio" id="opOne" checked>Option 1</label>
        <label class="radio-inline"><input type="radio" name="optradio" id="opTwo">Option 2</label>
    </div>
</div>
<div class="form-group" id="optionOneDiv">
    <label class="control-label col-sm-3">Account Number: <sup class="req">*</sup></label>
    <div class="col-md-6">
        <input class="form-control" type="text" name="optionOne" id="optionOne">
        <span class="glyphicon glyphicon-ok form-control-feedback correct"></span>
    </div>
</div>
<div class="form-group" id="optiontwoDiv">
    <label class="control-label col-sm-3">Credit Card: <sup class="req">*</sup></label>
    <div class="col-md-6">
        <input class="form-control" type="text" name="optionTwo" id="optionTwo">
        <span class="glyphicon glyphicon-ok form-control-feedback correct"></span>
    </div>
</div>

如果单击第一个单选按钮，则应显示optionOneDiv，并且应隐藏optiontwoDiv。如果是第二个选中单选按钮，optiontwoDiv应显示，另一个隐藏。我所做的就是这个

$('#optionTwoDiv').css('display', 'none');

$('input:radio[name="optradio"]').change(
    function(){
        if ($(this).is(':checked')) {
            if($(this).attr('id')=='opOne') {
                $('#optionOneDiv').css('display', 'block');
                $('#optionTwoDiv').css('display', 'none');
            } else {
                $('#optionOneDiv').css('display', 'none');
                $('#optionTwoDiv').css('display', 'block');
            }
        }
    });

它有效，但对我来说似乎有很多代码。有没有更好的方法来实现我的目标？

由于

Answer 1

您可以使用{/ 1}}方法，例如

＆＃13;

toggle()

＆＃13;

$('input[name="optradio"]:radio').change(function () {
    $('#optionOneDiv').toggle(this.id == 'opOne');
    $('#optionTwoDiv').toggle(this.id == 'opTwo');
});

＆＃13;

如果有更多选项，那么您可以使用元驱动方法，如

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
    <div class="col-md-6">
        <label class="radio-inline"><input type="radio" name="optradio" id="opOne" checked>Option 1</label>
        <label class="radio-inline"><input type="radio" name="optradio" id="opTwo">Option 2</label>
    </div>
</div>
<div class="form-group" id="optionOneDiv">
    <label class="control-label col-sm-3">Account Number: <sup class="req">*</sup></label>
    <div class="col-md-6">
        <input class="form-control" type="text" name="optionOne" id="optionOne">
        <span class="glyphicon glyphicon-ok form-control-feedback correct"></span>
    </div>
</div>
<div class="form-group" id="optiontwoDiv">
    <label class="control-label col-sm-3">Credit Card: <sup class="req">*</sup></label>
    <div class="col-md-6">
        <input class="form-control" type="text" name="optionTwo" id="optionTwo">
        <span class="glyphicon glyphicon-ok form-control-feedback correct"></span>
    </div>
</div>

＆＃13;

$('input[name="optradio"]:radio').change(function() {
  var $div = $('#' + this.id + 'Div').show();
  $('.option-div').not($div).hide();
});

＆＃13;

Answer 2

您需要进行以下更改才能获得欲望输出 -

1.add值属性到单选按钮。请参见下面的示例 -

<label class="radio-inline"><input type="radio" name="optradio" id="opOne" value='first' checked>Option 1</label>
        <label class="radio-inline"><input type="radio" name="optradio" id="opTwo" value='second'>Option 2</label>

2.在html中进行更改后，您需要在js文件中编写以下代码。

$('#optiontwoDiv').hide();

$('.radio-inline').change(function(){

  var selected_radio_value = $("input[name=optradio]:checked").val();

  if(selected_radio_value == 'first')
  {
      $('#optionOneDiv').show();
      $('#optiontwoDiv').hide();
  }
    if(selected_radio_value == 'second')
  {
       $('#optionOneDiv').hide();
      $('#optiontwoDiv').show();
  }


    });

要检查示例，请使用以下链接 -

http://jsfiddle.net/sbuyw255/1/

JQuery单选按钮隐藏和显示div

2 个答案: