javascript - 仅针对选中的复选框显示按钮。 js

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>