只有一個按鈕可以每行點擊

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，並在您選擇.btn時將data-selected設置爲false。希望這會幫助你。

$('.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); 
});