17 ноября 2022, 23:14

Переключатель плюс и минус для input JS jQuery

Прибавить или отнять 1 по клику для input.

Кнопки плюс и минус для полей input. Можно сделать несколько полей input на одной странице и они будут прибавлять и убавлять для каждого своего поля.

data-max-count="10" - так можно задать максимальное кол-во.

<div class="btn_container">        
    <button class="btn_minus">-</button>
    <input type="text" class="count" value="1" data-max-count="10">
    <button class="btn_plus">+</button>
</div>

<div class="btn_container">        
    <button class="btn_minus">-</button>
    <input type="text" class="count" value="1" data-max-count="10">
    <button class="btn_plus">+</button>
</div>

// Убавляем кол-во по клику
$('.btn_minus').click(function() {
    let $input = $(this).parent().find('.count');
    let count = parseInt($input.val()) - 1;
    count = count < 1 ? 1 : count;
    $input.val(count);
});
// Прибавляем кол-во по клику
$('.btn_plus').click(function() {
    let $input = $(this).parent().find('.count');
    let count = parseInt($input.val()) + 1;
    count = count > parseInt($input.data('max-count')) ? parseInt($input.data('max-count')) : count;
    $input.val(parseInt(count));
}); 
// Убираем все лишнее и невозможное при изменении поля
$('.count').bind("change keyup input click", function() {
    if (this.value.match(/[^0-9]/g)) {
        this.value = this.value.replace(/[^0-9]/g, '');
    }
    if (this.value == "") {
        this.value = 1;
    }
    if (this.value > parseInt($(this).data('max-count'))) {
        this.value = parseInt($(this).data('max-count'));
    }    
});

.btn_container {
    display: flex; 
    justify-content: center;
}
.count {
    max-width: 100px;
    text-align: center;
    border-radius: 0;
}
.btn_minus {
    border-radius: 4px 0 0 4px;
    margin-right: -1px;
}
.btn_plus {
    border-radius: 0 4px 4px 0;
    margin-left: -1px;
}