取消選中當任何指定的一個被點擊

以下HTML顯示單選按鈕和下面的DIV表示將出現在內容的所有單選按鈕根據單擊每個無線電BUTTOM取消選中當任何指定的一個被點擊

<ul> 
    <li id="6"><input type="radio" name="sell" value="sell" id="sell" />Sell</li> 
    <li id="7"><input type="radio" name="rent" value="rent" id="rent" />Rent</li> 
<li id="8"><input type="radio" name="donate" value="donate" id="donate" />Donate</li> 
</ul> 


    <div id="selltab">       
     eeeeeeeee 
    </div> 
    <div id="renttab"> 
     ffffffffff 
    </div> 
    <div id="donatetab"> 
     ggggggggg 
    </div>

JavaScript函數如下所示的功能，正在正常工作並在點擊其他單選按鈕時隱藏內容。但問題是，作爲選擇，即使在div其他內容不那麼選擇所有單選按鈕示....

需要取消選中剩餘的2的單選按鈕，當任一個被選擇時，是否有可能

$(document).ready(function(){ 
    $('#selltab').hide(); 
    $('#renttab').hide(); 
    $('#donatetab').hide(); 

     $('input[name=sell]').click(function(){ 
    $('#selltab').toggle(); 
     $('#renttab').hide(); 
    $('#donatetab').hide(); 
     $('rent').checked = false; 
    $('donate').checked = false; 
     }) 

    $('input[name=rent]').click(function(){ 
    $('#renttab').toggle(); 
$('#selltab').hide(); 
    $('#donatetab').hide(); 
$('sell').checked = false; 
     $('donate').checked = false; 
    }) 

    $('input[name=donate]').click(function(){ 
     $('#donatetab').toggle(); 
$('#selltab').hide(); 
    $('#renttab').hide(); 
$('rent').checked = false; 
    $('sell').checked = false; 
    }) 

});

來源

2012-05-07 Nabe

你能縮小它嗎？ –

是的，當然。您可以通過以下兩種方式做到這一點

第一個是，你可以很容易地只是使集團（設置相同的名稱）的單選按鈕如下：

<ul> 
<li id="6"><input type="radio" name="r1" value="sell" id="sell" />Sell</li> 
<li id="7"><input type="radio" name="r1" value="rent" id="rent" />Rent</li> 
<li id="8"><input type="radio" name="r1" value="donate" id="donate" />Donate</li> 
</ul> 

$(document).ready(function(){ 
    $('#selltab').hide(); 
    $('#renttab').hide(); 
    $('#donatetab').hide(); 

    $('input[id=sell]').click(function(){ 
    $('#selltab').toggle(); 
    $('#renttab').hide(); 
    $('#donatetab').hide(); 
    }) 

    $('input[id=rent]').click(function(){ 
    $('#renttab').toggle(); 
    $('#selltab').hide(); 
    $('#donatetab').hide(); 
    }) 

    $('input[id=donate]').click(function(){ 
    $('#donatetab').toggle(); 
    $('#selltab').hide(); 
    $('#renttab').hide(); 
    }) 
});

而第二個是使用另一個JavaScript函數來解決你的問題如下：

<ul> 
<li id="6"><input type="radio" name="sell" value="sell" id="sell" onClick="checkedRadioButton(this);"/>Sell</li> 
<li id="7"><input type="radio" name="rent" value="rent" id="rent" onClick="checkedRadioButton(this);"/>Rent</li> 
<li id="8"><input type="radio" name="donate" value="donate" id="donate" onClick="checkedRadioButton(this);"/>Donate</li> 
</ul> 


function checkedRadioButton(obj){ 
    var id = obj.name.substring(obj.name.lastIndexOf(':')); 
    var el = obj.form.elements; 
    for (var i = 0; i < el.length; i++) { 
     if (el[i].name.substring(el[i].name.lastIndexOf(':')) == id) { 
      el[i].checked = false; 
     } 
    } 
    obj.checked = true; 
}

來源

2012-05-07 06:34:17 AKZap

你在這種情況下實際做的是讓所有單選按鈕共享相同的名稱。單選按鈕的默認行爲是，只能同時選擇一個組。相反，通過使用

$('input[name=theName]')

像你現在這樣做accesing他們，只是利用

$('#theInputIdHere')

訪問它們，因爲你已經給了他們的ID。有了這個，你將不會有任何問題來取消選中任何一個單選按鈕，因爲默認情況下始終只會選擇一個。

來源

2012-05-07 06:31:58

嘗試更換您的$('rent').checked = false;

與$("#rent").attr("checked", false);

和類似的在必要時其他2。

你想通過ID訪問它，所以使用＃

來源

2012-05-07 06:32:11

- >'$（「＃rent」）。attr（「checked」，false）;' –

確實，謝謝derek我會更新 –

取消選中當任何指定的一個被點擊

回答

相關問題