2012-03-01 252 views
105

我想設置一個單選按鈕。我想通過使用值或ID來設置它。jQuery設置單選按鈕

這是我試過的。

$('input:radio[name=cols]'+" #"+newcol).attr('checked',true); 

newcol是單選按鈕的ID。

也許有點編輯是爲了。

有兩套無線電箱,其中一箱有一列,另一箱有行。所以我明白了不使用id的意義。我的錯。所以,我有作爲一個例子:

<input type="radio" name="rows" class="listOfCols" 
    style="width: 50%; " value="Site"></input> 

<input type="radio" name="cols" class="listOfCols" 
    style="width: 50%; " value="Site"></input> 

與ID的刪除,而我需要設置正確的。

+5

的可能重複[如何設置無線選項的onload檢查與jQuery](http://stackoverflow.com/questions/871063/how-to-set-radio-option-checked-onload-with-jquery) – 2012-03-01 22:27:17

+0

這就是我正在尋找克里斯。謝謝 – mike628 2012-03-02 20:54:31

+0

@ mike628你應該接受其中一個答案! – 2014-01-05 20:20:33

回答

168

您的選擇器查找ID爲newcol(以及該變量的值)的input:radio[name=cols]元素的後代。

試試這個(因爲你的ID無論如何選擇):

$('#' + newcol).prop('checked',true); 

這裏是一個演示:http://jsfiddle.net/jasper/n8CdM/1/

另外,在jQuery 1.6的改變屬性的尤佳方法是.prop()http://api.jquery.com/prop

+5

+1對'prop' vs'attr'。 'attr'棄用於屬性,不再適用於jQuery 2.0)) – gavenkoa 2013-12-20 16:09:09

+2

通過@Chococroc檢查答案 – Foreever 2015-05-20 08:23:54

14

在你的選擇器中,你似乎試圖用一個給定的ID來獲取你單選按鈕的嵌套元素。如果你想檢查一個單選按鈕,你應該選擇在選擇,而不是別的東西該單選按鈕:

$('input:radio[name="cols"]').attr('checked', 'checked'); 

這裏假設你已經在你的標記以下單選按鈕:

<input type="radio" name="cols" value="1" /> 

如果你的單選按鈕有一個ID:

<input type="radio" name="cols" value="1" id="myradio" /> 

你可以直接使用id選擇:

$('#myradio').attr('checked', 'checked'); 
+0

如果有多個收音機帶有'cols'名字,那麼'$('input:radio [name =「cols」]')。attr('checked','checked');'只會選擇最後一個。它會在每個代碼上運行代碼,但是每次設置'checked'屬性時,先前設置的元素都會被取消設置。這是一個演示:http://jsfiddle.net/jasper/n8CdM/2/ – Jasper 2012-03-01 22:31:24

+0

@賈斯珀,是的,這是真的。這就是爲什麼我建議使用ID選擇器。 – 2012-03-01 22:32:00

2

由於newcol是單選按鈕的ID,您可以簡單地使用它,如下所示。

$("#"+newcol).attr('checked',true); 
7

爲什麼你需要'input:radio[name=cols]'。不知道你的html,但假設id是唯一的,你可以簡單地做到這一點。與attr("checked", true)

$("#" + newcol).attr("checked", "checked"); 

我有問題,所以我傾向於改用以上:

$('#'+newcol).prop('checked', true); 
6

試試這個。

此外,如果您有該ID,那麼您不需要其他材料進行選擇。一個ID是唯一的。

+1

prop比attr好這樣的東西 – RozzA 2013-08-04 13:20:04

+0

attr不在jQuery 1.9+中使用道具。 – 2013-09-18 17:11:46

+0

你是對的,但最終取決於你的具體情況。如果你的代碼會一直運行在jQuery 1.6+上,那麼prop就是要走的路。但是如果你的代碼可能在舊版本上運行,那麼解決方案就不那麼簡單了。例如,我維護jQuery PickList插件,並且我們支持jQuery 1.4+,因此僅使用prop不是一種選擇。這是一張開放的門票,所以如果你有任何優雅的建議,我很樂意聽到他們;我還沒有時間做這項研究。 – 2013-09-22 15:23:37

61

我在這裏找到了答案:
https://web.archive.org/web/20160421163524/http://vijayt.com/Post/Set-RadioButton-value-using-jQuery

基本上,如果你想檢查一個單選按鈕,你必須通過值作爲數組:

$('input:radio[name=cols]').val(['Site']); 
$('input:radio[name=rows]').val(['Site']); 
+1

完美適用於我的場景。也很優雅! – kneidels 2013-09-11 21:16:39

+0

你好,鏈接沒有建議的內容。爲什麼你們不斷拒絕我的編輯來刪除鏈接。它不包含任何關於此事的內容。 – 2016-11-09 03:25:52

+0

@MenukaIshan,重點是:給予學分。這個鏈接可以在web.archive.org中找到,那個第一次寫這個鏈接的人以及我從中得到答案想法的人必須得到它的信任。不要刪除鏈接,如果你想看到原來的文章,請複製並粘貼鏈接(我不知道爲什麼它會進入舊頁面而不是web.archive.org) – Chococroc 2016-11-09 08:45:06

10

你可以試試下面的代碼:

$("input[name=cols][value=" + value + "]").attr('checked', 'checked'); 

這將設置根據指定檢查無線電列和值的屬性。

+1

'。 ..最重要的概念要記住關於檢查屬性是它不符合檢查屬性。來源:http://api.jquery.com/attr/ – Jasper 2014-06-27 15:51:46

0

您可以簡單地使用:

$("input[name='cols']").click(); 
0

所選擇的答案能在這種情況下。

但問題是要找到基於radiogroup和動態id的元素,答案也可以保持顯示的單選按鈕不受影響。

此行確實選擇了在屏幕上顯示更改時所要求的內容。

$('input:radio[name=cols][id='+ newcol +']').click(); 
2

使用.filter()也適用,並且是柔性的,ID,值,名稱:

$('input[name="cols"]').filter("[value='Site']").attr('checked', true);

(看到this blog

+0

我相信這是一個同樣有效的答案,但它應該使用prop()方法:$('input [name =「cols」]')。filter(「[value ='Site']」)。prop('checked',true);.用戶想要通過「值或ID」進行設置。可能有些時候你不想爲每個無線電選項設置id值,所以通過名稱和按值過濾非常有用。 – 2018-02-10 16:52:59