input數量+ -

HTML
<input type='button' value='-' class='qtyminus' field='quantity' />
    <input type='text' name='quantity' value='0' class='qty' />
    <input type='button' value='+' class='qtyplus' field='quantity' />

    <input type='button' value='-' class='qtyminus' field='quantity2' />
    <input type='text' name='quantity2' value='0' class='qty' />
    <input type='button' value='+' class='qtyplus' field='quantity2' />





JS

//用來做訓練人員數量加減
jQuery(document).ready(function(){
    // This button will increment the value
    $('.qtyplus').click(function(e){
        // Stop acting like a button
        e.preventDefault();
        // Get the field name
        fieldName = $(this).attr('field');
        // Get its current value
        var currentVal = parseInt($('input[name='+fieldName+']').val());
        // If is not undefined
        if (!isNaN(currentVal)) {
            // Increment
            $('input[name='+fieldName+']').val(currentVal + 1);
        } else {
            // Otherwise put a 0 there
            $('input[name='+fieldName+']').val(0);
        }
    });
    // This button will decrement the value till 0
    $(".qtyminus").click(function(e) {
        // Stop acting like a button
        e.preventDefault();
        // Get the field name
        fieldName = $(this).attr('field');
        // Get its current value
        var currentVal = parseInt($('input[name='+fieldName+']').val());
        // If it isn't undefined or its greater than 0
        if (!isNaN(currentVal) && currentVal > 0) {
            // Decrement one
            $('input[name='+fieldName+']').val(currentVal - 1);
        } else {
            // Otherwise put a 0 there
            $('input[name='+fieldName+']').val(0);
        }
    });
});


CSS
.qty{
    -webkit-appearance: none;
    border-radius: 0;
    line-height: 2.5;
    width: 36px;
    height: 25px;
    border-left: none;
    border-right: none;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    vertical-align: middle;
    text-align: center;
    background-color: #fff;
    margin: 0;
    margin-left: -3px;
    margin-right: -3px;
}
.qtyminus, .qtyplus {
    -webkit-appearance: none;
    border-radius: 0;
    display: inline-block;
    height: 25px;
    width: 20px;
    vertical-align: middle;
    cursor: pointer;
    box-shadow: none;
    border: solid 1px #ccc;
    padding: 0;
    font-size: 20px;
    background: #EEEEEE;
}