Как сделать так, что каждому input number соответствовал свой input checkbox?

Question

При увеличении значения input number выделяются все checkbox'ы, Как сделать так, что каждому "number" соответствовал свой "checkbox"? Поскажите пожалуйста новичку.

html

<div class="dance-type">
<div class="wrap-exact">
    Ballroom Standard
</div>
<div class="wrap-exact-check">
    <div class="check-item">
        <div class="check-item-wr">
            <input type="checkbox" id="dancetype1" name="dancetype1" value="Slow Waltz">
            <span>Slow Waltz </span>
        </div>
        <input type="number" id="quantity1" name="quantity1" placeholder="0" step="1" min="1" max="20">
        
    </div>

    <div class="check-item">
        <div class="check-item-wr">
            <input type="checkbox" id="dancetype2" name="dancetype2" value="Tango">
            <span>Tango</span>
        </div>
        <input type="number" id="quantity2" name="quantity2" placeholder="0" step="1" min="1" max="20">
    </div>

    <div class="check-item">
        <div class="check-item-wr">
            <input type="checkbox" id="dancetype3" name="dancetype3" value="Venice Waltz">
            <span>Venice Waltz</span>
        </div>
        <input type="number" id="quantity3" name="quantity3" placeholder="0" step="1" min="1" max="20">          
    </div>
    
    <div class="check-item">
        <div class="check-item-wr">
            <input type="checkbox" id="dancetype4" name="dancetype4" value="Foxtrot">
            <span>Foxtrot</span>
        </div>
        <input type="number" id="quantity4" name="quantity4" placeholder="0" step="1" min="1" max="20">
    </div>
    
    <div class="check-item">
        <div class="check-item-wr">
            <input type="checkbox" id="dancetype5" name="dancetype5" value="Quickstep">
            <span>Quickstep</span>
        </div>
        <input type="number" id="quantity5" name="quantity5" placeholder="0" step="1" min="1" max="20"> 
    </div>
    

</div>

jquery (мои попытки сделать это на jquery)

 $(document).ready(function(){
    $('.check-item input[type="number"]').each(function() {
        $(this).change(function() {
            var danceCount = $(this).val();
            console.log(danceCount);
        
            if( danceCount > 0 ) {
               $('.check-item input:checkbox').each(function() {
                   $('.check-item input:checkbox').prop('checked', true);
               });
               
            } else {
               $('.check-item input:checkbox').prop('checked', false);
            }
        });
    });
});

Answer 1

Оборачиваем input и checkbox в один div и через jquery меняем состояние через siblings (соседние элементы) UPD: Добавлен функционал снятия чекбокса при обнулении инпута

  $('input[type="number"]').change(function(){
     $(this).siblings('input[type="checkbox"]').prop('checked', true);
     let thisval = $(this).val();
     
     if (thisval == 0){
        $(this).siblings('input[type="checkbox"]').prop('checked', false);
     }
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<input type="number" min="0">
<input type="checkbox">
</div>

БЛОГ НА HUSL

Как сделать так, что каждому input number соответствовал свой input checkbox?

Ответы (1 шт):