jQuery单选按钮 – 只选择一个？
这可能是一个愚蠢的简单问题，但我被困住了。
我创建了一个包含多个复选框的表单，当单击复选框时，它会将每个复选框的值作为逗号分隔列表传递给隐藏的输入字段。 这是一种享受。 但由于一些问题，我现在必须改变我的代码，以便它使用单选按钮 – 所以没有逗号分隔的值列表，一次只有一个。
我改变了代码把它交换到单选按钮， 除了两件事情之外它工作得很好：1）它不是在单选按钮之间切换（每次我选择一个按钮，它保持选中，因为我选择其他按钮）和2）它正在添加到列表而不是返回所选的单个选项。 换句话说，它仍然像一个复选框，除了视觉上，它是圆的，有一个点。 大声笑
到目前为止，这是我的代码：
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(),""); }); } }); });`
这是做同样事情的简单方法：假设无线电组名称= a
$("input[name='a']").change(function(){ alert($(this).val()); });
对于演示： http ： //jsfiddle.net/naveed_ahmad/AtrXw/
单选按钮必须具有相同的名称属性。 id属性可以不同，但同一名称属性允许您一次只选择一个。
那么，您将“text”元素的值设置为其当前值加上所选单选按钮的值。 要摆脱之前的单选按钮值，您必须根据某种模式删除它，或者将文本输入的原始值存储在某处，以便您可以重新构建它。
如果您的单选按钮不像单选按钮那样，那是因为您没有给它们提供相同的名称。 这就是单选按钮的工作原理：在共享名称的那些按钮中，最多可以随时选择一个。
您的代码无法使用无线电盒，因为它假定您单击复选框以取消选中它。 对于无线电盒，您不必单击一个框来取消选中它，只需选择另一个无线电盒，因此永远不会调用从隐藏字段中删除未选中框的值的function。
当然你可以修改你的代码以使用无线电盒但我不认为这是必要的：这是将所选盒子的值传递给服务器的无线电盒的默认行为，所以你不必复制它隐藏字段的值。
我想这就是你想要的：
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); }
当您为所有无线电设置相同的name html属性时，您只能选择一个。 以下是我用于设置单选按钮并选择用户所选值的示例。
参考
- 我什么时候应该在HTML4 / HTML5中使用name属性？
- 推荐的2012年jQuery模板？
码
$(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); } });