jquery取消选中更改值递增输入

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">