HTML
<div class="container">
<div class="page-header"><h1>Bootstrap 3 input-spinner</h1></div>
<div class="input-group spinner">
<input type="text" class="form-control" value="42">
<div class="input-group-btn-vertical">
<button class="btn btn-default" type="button"><i class="fa fa-caret-up"></i></button>
<button class="btn btn-default" type="button"><i class="fa fa-caret-down"></i></button>
</div>
</div>
</div>
CSS
.spinner {
width: 100px;
}
.spinner input {
text-align: right;
}
.input-group-btn-vertical {
position: relative;
white-space: nowrap;
width: 1%;
vertical-align: middle;
display: table-cell;
}
.input-group-btn-vertical > .btn {
display: block;
float: none;
width: 100%;
max-width: 100%;
padding: 8px;
margin-left: -1px;
position: relative;
border-radius: 0;
}
.input-group-btn-vertical > .btn:first-child {
border-top-right-radius: 4px;
}
.input-group-btn-vertical > .btn:last-child {
margin-top: -2px;
border-bottom-right-radius: 4px;
}
.input-group-btn-vertical i{
position: absolute;
top: 0;
left: 4px;
}
JS
(function ($) {
$('.spinner .btn:first-of-type').on('click', function() {
$('.spinner input').val( parseInt($('.spinner input').val(), 10) + 1);
});
$('.spinner .btn:last-of-type').on('click', function() {
$('.spinner input').val( parseInt($('.spinner input').val(), 10) - 1);
});
})(jQuery);
DEMO
下载：Input-Number-Spinner-with-jQuery-Bootstrap-Spinner
HTML
<div class="container">
<div class="row">
<h2>Quantity Control</h2>
<div class="item col-xs-6 col-lg-6">
<div class="row">
<div class="col-md-12">
<div class="form-group form-group-options">
<div id="1" class="input-group input-group-option quantity-wrapper">
<span class="input-group-addon input-group-addon-remove quantity-remove btn">
<span class="glyphicon glyphicon-minus"></span>
</span>
<input id="1inp" type="text" value="6" name="option[]" class="form-control quantity-count" placeholder="1">
<span class="input-group-addon input-group-addon-remove quantity-add btn">
<span class="glyphicon glyphicon-plus"></span>
</span>
</div>
</div>
</div>
<div class="col-md-12">
<button type="button" class="btn btn-danger quantity-delete">
<span class="glyphicon glyphicon-remove"></span>Entfernen
</button>
</div>
</div><!--/Row-->
</div><!--/Item-->
<div class="item col-xs-6 col-lg-6">
<div class="row">
<div class="col-md-10">
<div class="form-group form-group-options">
<div id="2" class="input-group input-group-option quantity-wrapper">
<span class="input-group-addon input-group-addon-remove quantity-remove btn">
<span class="glyphicon glyphicon-minus"></span>
</span>
<input id="2inp" type="text" value="6" name="option[]" class="form-control quantity-count" placeholder="1">
<span class="input-group-addon input-group-addon-remove quantity-add btn">
<span class="glyphicon glyphicon-plus"></span>
</span>
</div>
</div>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-danger quantity-delete">
<span class="glyphicon glyphicon-remove"></span>
</button>
</div>
</div><!--/Row-->
</div><!--/Item-->
<div class="item col-xs-6 col-lg-6">
<div class="row">
<div class="col-md-10">
<div class="form-group form-group-options">
<div id="3" class="input-group input-group-option quantity-wrapper">
<span class="input-group-addon input-group-addon-remove quantity-remove btn">
<span class="glyphicon glyphicon-minus"></span>
</span>
<input id="3inp" type="text" value="6" name="option[]" class="form-control quantity-count" placeholder="1">
<span class="input-group-addon input-group-addon-remove quantity-add btn">
<span class="glyphicon glyphicon-plus"></span>
</span>
</div>
</div>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-danger quantity-delete">
<span class="glyphicon glyphicon-remove"></span>
</button>
</div>
</div><!--/Row-->
</div><!--/Item-->
</div>
</div>
CSS
.quantity-remove, .quantity-add {
cursor: pointer;
}
.quantity-add.glyphicon, .quantity-remove.glyphicon {
display: block;
cursor: pointer;
}
JS
$(document).ready(function(){
//Add
$(".quantity-add").click(function(e){
//Vars
var count = 1;
var newcount = 0;
//Wert holen + Rechnen
var elemID = $(this).parent().attr("id");
var countField = $("#"+elemID+'inp');
var count = $("#"+elemID+'inp').val();
var newcount = parseInt(count) + 1;
//Neuen Wert setzen
$("#"+elemID+'inp').val(newcount);
});
//Remove
$(".quantity-remove").click(function(e){
//Vars
var count = 1;
var newcount = 0;
//Wert holen + Rechnen
var elemID = $(this).parent().attr("id");
var countField = $("#"+elemID+'inp');
var count = $("#"+elemID+'inp').val();
var newcount = parseInt(count) - 1;
//Neuen Wert setzen
$("#"+elemID+'inp').val(newcount);
});
//Delete
$(".quantity-delete").click(function(e){
//Vars
var count = 1;
var newcount = 0;
//Wert holen + Rechnen
var elemID = $(this).parent().attr("id");
var countField = $("#"+elemID+'inp');
var count = $("#"+elemID+'inp').val();
var newcount = parseInt(count) - 1;
//Neuen Wert setzen
//$('.item').html('');
var row = $( ".row" );
$(event.target).closest(row).html('');
});
});
DEMO
转自：Bootstrap 3 input spinner 数字增减框