每行只能单击一个按钮

Question

我正在尝试编码，每个ROW只能选择一个按钮。 我尝试了太多，这是我做的最接近的。

我可以选择并取消选择它。 但是每行只能选择一个。 我的代码做什么：

我可以选择任何按钮，它将添加一个类，以使其变为红色。 所以现在选择此按钮。 我也可以取消选择它。

这是我的代码：

$('.btn').click(function(){
        if ($(this).attr('data-selected') === 'true') {
            $(this).attr('data-selected', 'false');
            $(this).removeClass('selected');
        }else {
            $(this).attr('data-selected', 'true');
            $(this).addClass('selected');
        }
    });

<style>
   .selected {
       color:red;
   }
</style>

一些印刷品可以帮助您：

Answer 1

您可以按照以下步骤进行操作。 只需找到其他.btn并从其中删除.selected ，然后在选择.btn时将data-selected设置为false .btn 。 希望这会帮助你。

 $('.btn').click(function () { if ($(this).attr('data-selected') === 'true') { $(this).attr('data-selected', 'false'); $(this).removeClass('selected'); } else { $(this).closest('tr').find('.btn').not(this) .removeClass('selected').attr('data-selected', 'false'); $(this).attr('data-selected', 'true'); $(this).addClass('selected'); } }); 

 .selected { color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td>1</td> <td>2</td> <td><input type="button" value="1.22" class="btn"/></td> <td><input type="button" value="1.33" class="btn" /></td> <td><input type="button" value="1.44" class="btn" /></td> </tr> <tr> <td>1</td> <td>2</td> <td><input type="button" value="1.22" class="btn" /></td> <td><input type="button" value="1.33" class="btn" /></td> <td><input type="button" value="1.44" class="btn" /></td> </tr> </table> 

Answer 2

为什么不只是制作看起来像按钮的单选按钮，如果给它们起相同的名称，它们将已经具有您要寻找的内置功能。

http://jsfiddle.net/DIRTY_SMITH/YB8UW/616/

    <ul class="donate-now">
<li>
    <input type="radio" id="a25" name="amount" />
    <label for="a25">$25</label>
</li>
<li>
    <input type="radio" id="a50" name="amount" />
    <label for="a50">$50</label>
</li>
<li>
    <input type="radio" id="a75" name="amount" checked="checked" />
    <label for="a75">$75</label>
</li>
<li>
    <input type="radio" id="a100" name="amount" />
    <label for="a100">$100</label>
</li>

</ul>
<br>
<ul class="donate-now">
<li>
    <input type="radio" id="b25" name="amountb" />
    <label for="b25">$25</label>
</li>
<li>
    <input type="radio" id="b50" name="amountb" />
    <label for="b50">$50</label>
</li>
<li>
    <input type="radio" id="b75" name="amountb" checked="checked" />
    <label for="b75">$75</label>
</li>
<li>
    <input type="radio" id="b100" name="amountb" />
    <label for="b100">$100</label>
</li>

</ul>

Answer 3

我为您制作了一个可以用于多行的示例： https : //jsfiddle.net/448feo3j/

$('.button-default').click(function() {
    $(this).parents('tr').find('.button-default').removeClass('button-clicked').attr('data-selected', false);
    $(this).addClass('button-clicked').attr('data-selected', true);
});