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