jQuery单选按钮 - 只选择一个？答案

【问题标题】：jQuery radio buttons - choose only one?jQuery单选按钮 - 只选择一个？
【发布时间】：2011-08-13 21:47:35
【问题描述】：

这可能是一个愚蠢的简单问题，但我被卡住了。

我创建了一个带有多个复选框的表单，当单击复选框时，它会将每个复选框的值作为逗号分隔的列表传递给隐藏的输入字段。它奏效了。但由于一些问题，我现在必须更改我的代码，以便它使用单选按钮 - 所以没有逗号分隔的值列表，一次只有一个。

我更改了代码以将其换成单选按钮，它工作正常除了有两件事：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(),"");
            });
          }
        });
    });

所以当我取消注释“警报”行时，我可以看到传递的内容，它只是添加到列表中而不是替换为新值。任何人都知道如何解决上述问题，因此只能选择和传递 one 选项？（虽然上面的代码真棒作为一个复选框的东西。我实际上认为我从这里的某个地方得到了上面的代码，虽然我不记得在哪里！）

编辑：这是解决问题的代码，并且很有效（谢谢大家:)）-也许将来会对其他人有所帮助。

`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(),"");
            });
          }
        });
    });`

【问题讨论】：

单选按钮的标记是什么？
您是否对单选按钮进行了分组？给所有相同的名字...
你为什么要检查它是否被检查。收音机总是在点击时被选中。
我尝试了没有检查，如果它不存在，它就不能正确传递值。不知道为什么——但话说回来，我更像是一个 WordPress/PHP 人，而不是一个 jQuery 人 :)

标签： jquery forms

【解决方案1】：

单选按钮必须具有相同的名称属性。 id 属性可以不同，但相同的 name 属性允许您一次只能选择一个。

【讨论】：

我将 Naveed 的答案标记为正确，但这个答案也是正确的！（不过，我只能选择一个！）我没有为单选按钮设置“名称”，因此这解决了允许它选择多个的问题。但是 Naveed 的解决方案保留了（稍微重要的）只返回一个传递值的问题。非常感谢大家的帮助！我真的很感激:)

【解决方案2】：

这是做同样事情的更简单的方法：假设无线电组名称 = a

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

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

【讨论】：

【解决方案3】：

嗯，您将“文本”元素的值设置为其当前值加上所选单选按钮的值。要摆脱以前的单选按钮值，您必须根据某种模式将其删除，或者将文本输入的原始值存储在某处以便您可以重建它。

如果您的单选按钮不像单选按钮，那是因为您没有给它们都赋予相同的名称。这就是单选按钮的工作原理：在同名的单选按钮中，最多可以随时选择一个。

【讨论】：

【解决方案4】：

您的代码无法使用单选框，因为它假定您单击复选框以取消选中它。对于单选框，您不必单击一个框来取消选中它，您只需选择另一个单选框，因此从隐藏字段中删除未选中框的值的函数永远不会被调用。

当然，您可以修改您的代码以使用单选框，但我认为这是必要的：将所选框的值传递给服务器是单选框的默认行为，因此您没有将其值复制到隐藏字段。

【讨论】：

【解决方案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);
}

【讨论】：

【解决方案6】：

当您将所有收音机的name html 属性设置为相同时，您只能选择一个。以下是我用于设置单选按钮和选择用户选择值的示例。

参考

代码

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

【讨论】：