jquery uncheck change value incremented input

Question

Этот вопрос над моим мастерством.

Если я снимите флажок 3, я хочу изменить значение входа 3, 4, 5, 6, 7, 8, 9.
Если я снимите флажок 6, я хочу, чтобы изменить значение входа 6, 7, 8, 9.
Если я сниму флажок X, я хочу изменить значение ввода X ++.

Я написал этот код JQuery:

<code> 
$('input[type=checkbox][name=checkbox_5]').on('change', function() { 
    if ($(this).is(":not(:checked)")) { 
     $('input[type=text][name=input_5]').val(''); 
     $('input[type=text][name=input_6]').val(''); 
     $('input[type=text][name=input_7]').val(''); 
     $('input[type=text][name=input_8]').val(''); 
     $('input[type=text][name=input_9]').val(''); 
    } 
}); 
</code> 

У меня есть 9 флажок. Я не хочу писать для каждого флажка этот фрагмент. Можете ли вы помочь мне исправить это?

Я предпочитаю использовать приращение, но я не знаю, как это сделать.

https://jsfiddle.net/j4q6jm6u/

Answer 1

Вы можете использовать .index(), чтобы получить индекс щелкнули флажком затем изменить значение текстовых полей с индексом больше, чем с :gt()

 
$('input[type=checkbox]').on('change', function() { 
 
    var index = $("input[type=checkbox]").index(this); 
 
    console.log(index) 
 
    if ($(this).is(":not(:checked)")) {  
 
     $('input[type=text]:gt('+index+')').val('');  
 
    }else { 
 
    $('input[type=text]:gt('+index+')').val(index); 
 
    } 
 
}); 
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text"><br> 
 
<input type="text"><br> 
 
<input type="text"><br> 
 
<input type="text"><br> 
 
<input type="text"><br> 
 
<input type="text"><br> 
 

 
<input type="checkbox"> 
 
<input type="checkbox"> 
 
<input type="checkbox"> 
 
<input type="checkbox">