javascript - 每行只能点击一个按钮

Question

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

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

我可以选择任何按钮，它会被添加一个类，它会变红。所以现在这个按钮被选中了。我也可以取消选择它。

这是我的代码:

$('.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 并将 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>