我正在使用bootstrap btn-group类用于单选按钮。他们没有在live server上工作。我的网站正在开发example.com。虽然他们在一个单独的html页面上工作。
<div class="row">
<section class="col-lg-2 col-xs-3">
<label>Gender:</label></section>
<section class="col-lg-4 col-xs-8">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary control-label input-group">
<input type="radio" name="gender" id="option2" autocomplete="off" value="male">Male
</label>
<label class="btn btn-primary ">
<input type="radio" name="gender" id="option3" autocomplete="off" value="female" checked> Female
</label>
</div>
</section>
</div>
答案 0 :(得分:0)
.btn > input[type="radio"] {
display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row">
<section class="col-lg-2 col-xs-3">
<label>Gender:</label></section>
<section class="col-lg-4 col-xs-8">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary control-label input-group">
<input type="radio" name="gender" id="option2" autocomplete="off" value="male">Male
</label>
<label class="btn btn-primary ">
<input type="radio" name="gender" id="option3" autocomplete="off" value="female" checked> Female
</label>
</div>
</section>
</div>
添加
.btn > input[type="radio"] {
display: none;
}
在你的CSS中
答案 1 :(得分:0)
$(document).ready(function(){
$('.gender').on('click', function() {
$('.checked').removeClass('checked');
$(this).addClass('checked');
});
});
&#13;
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
.checked {
background-color: #286090;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<section class="col-lg-2 col-xs-3">
<label>Gender:</label>
</section>
<section class="col-lg-4 col-xs-8">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary control-label input-group gender">
<input type="radio" name="gender" id="option2" autocomplete="off" value="male">Male
</label>
<label class="btn btn-primary gender">
<input type="radio" name="gender" id="option3" autocomplete="off" value="female" checked> Female
</label>
</div>
</section>
</div>
&#13;