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

时间:2016-08-05 00:19:04

标签: jquery checkbox numbers increment

这个问题超出了我的能力。

如果我取消选中复选框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/

1 个答案:

答案 0 :(得分: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">