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); 
     } 
});