jQuery單選按鈕 - 只選一個？

Question

這可能是一個愚蠢的簡單問題，但我卡住了。

我創建了一個包含多個複選框的表單，當點擊複選框時，它會將每個複選框的值作爲逗號分隔列表傳遞給隱藏的輸入字段。它工作得很好。但由於一些問題，我現在不得不改變我的代碼，以便它使用單選按鈕 - 所以沒有逗號分隔的值列表，只是一次一個。

我改變了代碼，將其交換出單選按鈕和它的正常工作除了兩件事情：1）它不是單選按鈕（每次我選擇按鈕時之間切換，它會保持選定爲我選擇別人）和2）它將添加到列表中，而不是返回選定的單個選項。換句話說，它仍然像一個複選框，除了視覺上，它是圓的，有一個點。 LOL

這是我的代碼至今：

jQuery(document).ready(function($) { 
     $(':radio').click(function() { 
      var radio = $(this); 
      var text = $('input[name="cat"]'); 
      if(radio.is(':checked')) { 
      text.val(text.val() + radio.val()); 
      //alert(text.val()); 
      } else { 
      text.val(function() { 
       $(this).val().replace(radio.val(),""); 
      }); 
      } 
     }); 
    }); 

所以當我取消對「警戒」行，我可以看到什麼過去了，它只是添加到列表中，而不是用新值取代。任何人都知道如何修復以上所以只有一個選項可以被選中並通過？ （以上代碼工作赫然爲複選框的事情，雖然我真的覺得我從這裏上面的代碼中的某個地方，但我不記得在那裏。！）

編輯：這裏是一個解決問題和工作代碼一種享受（謝謝你們所有:)） - 也許它會在未來幫助別人。

`jQuery(document).ready(function($) { 
     $(':radio').change(function() { 
      var radio = $(this); 
      var text = $('input[name="cat"]'); 
      if(radio.is(':checked')) { 
      text.val(radio.val()); 
      //alert(text.val()); 
      } else { 
      text.val(function() { 
       $(this).val().replace(radio.val(),""); 
      }); 
      } 
     }); 
    });` 

Answer 1

這是做同樣的事情更簡單的方法：假設無線電集團名稱= a

$("input[name='a']").change(function(){ 
    alert($(this).val()); 
}); 

對於演示：http://jsfiddle.net/naveed_ahmad/AtrXw/

Answer 2

單選按鈕必須具有相同的名稱屬性。 id屬性可以不同，但​​是同一個名稱屬性允許您一次只選擇一個。

Answer 3

那麼，您將「文本」元素的值設置爲其當前值加上所選單選按鈕的值。要擺脫以前的單選按鈕值，您必須根據某種模式將其刪除，或者將某處的文本輸入的原始值保存起來，以便重新構建它。

如果您的單選按鈕不像單選按鈕那樣操作，那是因爲您沒有給出所有相同的名稱。這就是單選按鈕的工作方式：在共享名稱的人中，最多可以隨時選擇一個。

Answer 4

您的代碼無法與收音機一起使用，因爲它假設您單擊複選框取消選中它。在無線電盒的情況下，你不必點擊一個盒子來取消選中它，你只需選擇另一個無線電盒子，這樣就不會調用從隱藏域中刪除未選中框的值的功能。

當然，您可以修改您的代碼以使用收音機框但我不認爲這是必要的：這是電臺框將所選框的值傳遞給服務器的默認行爲，所以您不需要必須將其值複製到隱藏字段。

Answer 5

我想這是你想要什麼：

jQuery(document).ready(function($) { 
    $(':radio').click(function() { 
     var radio = $(this); 
     var text = $('input[name="cat"]'); 
     removeRadioValues() 
     text.val(text.val()+radio.val()); 
    }); 
}); 
function removeRadioValues(){ 
    var tf = $('input[name="cat"]'); 
    var text = tf.val() 
    $(':radio').each(function(){ 
     text = text.replace($(this).val(),''); 
    }); 
    tf.val(text); 
} 

Answer 6

當您設置name html屬性相同的所有收音機，那麼你只能選擇一個。以下是我用於設置單選按鈕並選擇用戶所選值的示例。

參考

1. When should I use the name attribute in HTML4/HTML5?
2. Recommended jQuery templates for 2012?

CODE

<script type="text/template" id="cardTemplate"> 
    <TR class=Normal> 
     <TD style="WIDTH: 275px" align=left> 
       <SPAN> LIJO </SPAN> 
     </TD> 
     <TD> 
      <label><input type="radio" name="defaultScanOption" id= "defaultScanOptionCase" value="Case" checked>Case</label> 
      <label><input type="radio" name="defaultScanOption" id= "defaultScanOptionWorkLot" value="WorkLot">WorkLot</label> 
      <label><input type="radio" name="defaultScanOption" id= "defaultScanOptionCutLot" value="CutLot">CutLot</label> 
      <label><input type="radio" name="defaultScanOption" id= "defaultScanOptionMoonrock" value="Moonrock">Moonrock</label> 
     </TD> 
    </TR> 
    </script> 

$(document).ready(function() 
{ 

     //Add Scan Type radio buttons as a table row 
     var cardTemplate = $("#cardTemplate").html();   
     $('#tblPlantParameters tr:last').after(cardTemplate); 

     //When Scan Type radio button selection change, set value in hidden field 
     $('input[name=defaultScanOption]:radio').change(function() 
     { 
      var selectedOptionValue = $(this).val(); 
      alert(selectedOptionValue); 
      $('#hidSelectedScanOption').val(selectedOptionValue); 
     });  


     //Set the Scan Type radio button if it has a value other than default 
     var existingDefaultScanType = document.getElementById('hidExistingScanOption').value; 
     alert(existingDefaultScanType); 
     if(existingDefaultScanType != null && existingDefaultScanType != "") 
     { 
      $("input[name=defaultScanOption][value="+existingDefaultScanType+"]").attr('checked', true); 
     } 
});