Question

我想选择单选按钮选项并且还想使用引导手风琴，但是当使用数据切换时，则不会选择单选按钮选项。我怎样才能将其用于此目的

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

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

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

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

我所做的是 - 当单击单选按钮时，使用JQuery触发锚标记的事件，因为它们都有自己的默认点击事件，因此锚不能将单选按钮作为子项。因此，为了使事情有效，我将它们用作兄弟元素，并在按下单选按钮时触发锚点击事件

希望这是你期待的!! 感谢

请查看此Codepen Snippet以获取进一步的参考。

使用bootstrap accordian

1 个答案: