javascript - 使用 Bootstrap Accordion 时，单选按钮无法与数据切换一起使用

Question

我想选择单选按钮选项，并且还想使用 Bootstrap Accordion ，但是当使用数据切换时，不会选择单选按钮选项。我该如何使用它来达到目的？

<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js'></script>
    <script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>
<div id='accordion1' class='panel-group'>
        <div class='panel' style="border: none !important; -webkit-box-shadow:none !important;">
            <input type='radio' id='r11' name='occupation' value='Working' required>
            <label data-toggle='collapse' data-parent='#accordion1' href='#collapse3' class='button1 header' for='r11' style='width: 350px;'>Working</label>
            <div id='collapse3' class='collapse'>
                <div class='panel-body'>
                    <div class='form-group'>
                        <label class='col-md-4 control-label' for='textinput'></label>  
                        <div class='col-md-4'>
                            <input id='textinput' name='profession' type='text' placeholder='Profession' class='form-control input-md'>
                            <span class='help-block'>e.g. Business Owner, Chef, Sales Person</span>  
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class='panel' style="border: none !important; -webkit-box-shadow:none !important;">
            <input type='radio' id='r21' name='occupation' value='Non-Working'>
            <label data-toggle='collapse' data-parent='#accordion1' href='#collapse4' class='button1 header1' for='r21' style='width: 350px'>Not Working</label>
            <div id='collapse4' class='collapse'>
                <div class='panel-body'>
                    <div class='form-group'>
                        <label class='col-md-4 control-label' for='selectbasic'></label>
                        <div class='col-md-4'>
                            <select id='selectbasic' name='profession' class='form-control'>
                                <option value='' selected='selected' disabled>Select</option>
                                <option value='Student'>Student</option>
                                <option value='Stay at home'>Stay at home</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

Answer 1

HTML 代码片段

<form class="bs-example" action="">
<div class="panel-group" id="accordion">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
            <label for='r11' style='width: 350px;'>
              <input type='radio' id='r11' name='occupation' value='Working' required /> Working
              <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"></a>
            </label>
        </h4>
      </div>
      <div id="collapseOne" class="panel-collapse collapse in">
        <div class="panel-body">
          <p>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages. <a href="http://www.tutorialrepublic.com/html-tutorial/" target="_blank">Learn more.</a></p>
        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class=panel-title>
            <label for='r12' style='width: 350px;'>
              <input type='radio' id='r12' name='occupation' value='Not-Working' required /> Not Working
              <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"></a>
            </label>
        </h4>
      </div>
      <div id="collapseTwo" class="panel-collapse collapse">
        <div class="panel-body">
          <p>Bootstrap is a powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions. <a href="http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/" target="_blank">Learn more.</a></p>
        </div>
      </div>
    </div>
  </div>
</form>

JS 代码片段

$('#r11').on('click', function(){
$(this).parent().find('a').trigger('click')
})

$('#r12').on('click', function(){
  $(this).parent().find('a').trigger('click')
})

我所做的是 - 当单击单选按钮时使用 JQuery 触发 anchor 标记的事件，因为它们都有自己的默认单击事件，因此 anchor 不能将单选按钮作为子按钮。因此，为了使事情正常进行，我将它们用作同级元素，并在按下单选按钮时触发 anchor 的单击事件

希望这是您所期待的!谢谢

请检查此Codepen Snippet ，供进一步引用。