我如何可以切換單選按鈕

說這是我的HTML：我如何可以切換單選按鈕

<input type="radio" name="rad" id="Radio0" checked="checked" /> 
<input type="radio" name="rad" id="Radio1" /> 
<input type="radio" name="rad" id="Radio2" /> 
<input type="radio" name="rad" id="Radio4" /> 
<input type="radio" name="rad" id="Radio3" />

正如你所看到的第一個單選按鈕被選中。我需要單選按鈕才能像切換一樣工作。例如。如果我再次點擊radio0，則應該取消選中所有單選按鈕。

我該如何做到這一點？

更新：我不想要任何額外的按鈕。例如。我可以添加一個按鈕，並將所有單選按鈕的選中屬性設置爲false。但是，我不想那樣。我只希望我的表單由這4個單選按鈕組成。

更新：由於大多數人不明白我想要什麼，所以讓我試着重新表達 - 我希望單選按鈕在切換模式下工作。我已經給所有的單選按鈕命名，因此它是一個組。現在我想讓單選按鈕自行切換。例如。如果我點擊radio0，它應該被取消選中，如果它被選中並且檢查它是否未被選中。

來源

2013-02-27 Jack

我認爲這是「所有單選按鈕應該檢查」 – 999k 2013-02-27 06:21:47

@Toms：你是什麼意思？ – Jack 2013-02-27 06:22:22

你不能選擇屬於同一個gruop的多個單選按鈕（具有相同的「名稱」值）。請考慮複選框。 – Nils 2013-02-27 06:28:04

你會發現的問題是，單擊一個單選按鈕後，它的狀態就會被更改，然後才能檢查它。我的建議是添加自定義屬性來跟蹤每一個無線電的先前狀態的，像這樣：

$(function(){ 
    $('input[name="rad"]').click(function(){ 
     var $radio = $(this); 

     // if this was previously checked 
     if ($radio.data('waschecked') == true) 
     { 
      $radio.prop('checked', false); 
      $radio.data('waschecked', false); 
     } 
     else 
      $radio.data('waschecked', true); 

     // remove was checked from other radios 
     $radio.siblings('input[name="rad"]').data('waschecked', false); 
    }); 
});

您還需要將此屬性添加到最初檢查無線電標記

<input type="radio" name="rad" id="Radio0" checked="checked" data-waschecked="true" />

觀看演示在這裏：http://jsfiddle.net/GoranMottram/VGPhD/2/

來源

2013-02-27 06:39:22

超人！確切地說，我需要的行爲。 – Jack 2013-02-27 06:41:25

有一個小問題。當我第一次點擊第一臺電臺時。它仍然被檢查。你能重現嗎？ – Jack 2013-02-27 06:45:36

啊，是的，我已經修復了更新了答案。對於那個很抱歉。 – 2013-02-27 06:48:37

一旦您將2個或更多單選按鈕的名稱視爲相同，它們將自動成爲一個組。在該組中只能檢查一個單選按鈕。你已經實現了這一點。

來源

2013-02-27 06:22:56 Aashray

我用一個onClick（）像我的定製無線電如下：

$(function(){ 
    // if selected already, deselect 
    if ($(this).hasClass('selected') { 
    $(this).prop('checked', false); 
    $(this).removeClass('selected'); 
    } 
    // else select 
    else { 
    $(this).prop('checked', true); 
    $(this).addClass('selected'); 
    } 
    // deselect sibling inputs 
    $(this).siblings('input').prop('checked', false); 
    $(this).siblings('input').removeClass('selected'); 
}

來源

2017-08-22 14:54:18

我如何可以切換單選按鈕

回答

相關問題