單選按鈕選中狀態的jQuery

這是基本的代碼單選按鈕選中狀態的jQuery

<ul> 
<li> 
    <input type="radio" name="r" value="a" id="a" checked="checked" /> 
    <label for="a">A</label> 
</li> 
<li> 
    <input type="radio" name="r" value="b" id="b" /> 
    <label for="b">B</label> 
</li> 
</ul>

所以我需要把它作爲工作：

1單擊<標籤>，並檢查同級<無線電>是檢查= "檢查"然後添加"選擇"類到母體<利>

2單擊<標籤>和檢查兄弟<無線電>未被選中，然後放入托運= "檢查"到同級<無線電>並添加"選擇"類父<李>也刪除所有其他"在< UL檢查"和"選擇" >

你能幫我請！

來源

2010-10-22 Stickers

點擊標籤應該在瀏覽器中自動檢查單選按鈕。所以，你只需要添加一個點擊事件到標籤/輸入，將設置在李的類。

像這樣的東西應該工作：
HTML（我只是說id="mylist"）

<ul id="mylist"> 
<li> 
    <input type="radio" name="r" value="a" id="a" checked="checked" /> 
    <label for="a">A</label> 
</li> 
<li> 
    <input type="radio" name="r" value="b" id="b" /> 
    <label for="b">B</label> 
</li> 
</ul>

的JavaScript

$(function() { 
$("#mylist input, #mylist label").click(function() { 
    $("#mylist li").removeClass("selected"); 
    $(this).parent().addClass("selected"); 
}); 
});

來源

2010-10-22 04:09:06

我確定這不是最優雅的方式，但是對標記進行了更改（向您的li添加類「a」和「b」 - 基本上與radio elem的id相同）在這裏我們去：

$('label').click(function(){ 
    // if the radio is already checked 
    if ($('#'+$(this).attr('for')).attr('checked') == 'checked') { 
     $('ul li').removeClass('selected'); // remove previous selected items 
     $('.'+$(this).attr('for')).addClass('selected'); // add new selected item 
    } else { 
     // radio not checked 
     $('#'+$(this).attr('for')).attr('checked','checked'); // check radio (altough this should be automatic, without js 
     $('ul li').removeClass('selected'); // clear previous selected items 
     $('.'+$(this).attr('for')).addClass('selected'); // add new selected item 
    } 
});

對於速度，我建議增加一個ID，UL，說「清單」，並有從

$('label').click(function(){

到

$('#list label').click(function(){

的代碼更改

此外，從：

$('ul li').removeClass('selected'); // remove previous selected items

到

$('#list li').removeClass('selected'); // remove previous selected items

祝你好運！

來源

2010-10-22 04:04:25 Claudiu

既然你已經使用label與for屬性有應該真的不需要附加一個事件到label元素，除非你需要與IE6抗衡使你生活困難。

$(':radio[name="r"]').change(function(){ 
    $(this).parent('li').addClass('selected').siblings().removeClass('selected'); 
}).filter(':checked').change();

文檔爲：change()

參見：http://www.jsfiddle.net/yijiang/mzPk9/

來源

2010-10-22 04:13:08

單選按鈕選中狀態的jQuery

回答

相關問題