仅为选中的复选框显示按钮。 js jquery

Question

我有一个复选框，onclick 显示一个按钮，但是一次只能单击一个复选框；当我单击复选框时，它会显示所有行的按钮。并且当我单击一个复选框并且同时如果我选中下一个复选框时，它会继续显示按钮（对于选中的最后一个复选框），即使它现在没有选中。对不起，如果我不清楚，请查看下面的测试代码以获取更多信息.选中的复选框只应出现一个按钮，如果未选中的按钮不应出现。任何帮助将不胜感激。

$(document).on('click', ".your", function() {
   $('.your').not(this).prop('checked', false);	//this will make only on checkbox to be checked	
   $('.deleteButton').toggle(this.checked);
		});

.testtable{
border:1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="testtable">
</th>
<tr>testcolumn</tr>
</th>
<tr><td>
<input type="checkbox"  class="your" value="yourCheckBoxVal">
<input type="button"  class="deleteButton" style="display:none">		
</td></tr>
<tr><td>
<input type="checkbox"  class="your" value="yourCheckBoxVal">
<input type="button"  class="deleteButton" style="display:none">		
</td></tr>
</td></tr>
<tr><td>
<input type="checkbox"  class="your" value="yourCheckBoxVal">
<input type="button"  class="deleteButton" style="display:none">		
</td></tr>

</table>

Answer 1

由于复选框和按钮都在同一级别，您可以使用$.siblings() 仅切换它。但你必须先隐藏其他人。一个好的做法是通过将按钮分配给一个变量来缓存按钮，以便在微观层面上获得更好的性能。

$(document).on('click', ".your", function() {

   $('.your').not(this).prop('checked', false);		
   // hide all 
   $('.deleteButton').hide();
   // show only this
   $(this).siblings('.deleteButton').toggle(this.checked);

});

.testtable{
border:1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="testtable">
</th>
<tr>testcolumn</tr>
</th>
<tr><td>
<input type="checkbox"  class="your" value="yourCheckBoxVal">
<input type="button"  class="deleteButton" style="display:none">		
</td></tr>
<tr><td>
<input type="checkbox"  class="your" value="yourCheckBoxVal">
<input type="button"  class="deleteButton" style="display:none">		
</td></tr>
</td></tr>
<tr><td>
<input type="checkbox"  class="your" value="yourCheckBoxVal">
<input type="button"  class="deleteButton" style="display:none">		
</td></tr>

</table>