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

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

编辑：这是解决问题的代码并且有效处理（感谢大家:)） - 也许它将来会帮助别人。

`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

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

Answer 2

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

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

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

Answer 3

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

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

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属性时，您只能选择一个。以下是我用于设置单选按钮并选择用户所选值的示例。

<强>参考

When should I use the name attribute in HTML4/HTML5?
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);
        } 
 });

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

6 个答案: