Question

以下是我的问题的实例

http://jsfiddle.net/littlesandra88/xksB9/

我原本以为“创建”按钮在未选中其单选按钮时返回空字符串。相反，它从下面的表单中的单选按钮读取值。

底部的“保存”按钮始终返回上表中的值。很奇怪！

这是代码

$(document).ready(function(){

   $('form').live('submit', function(){

      var title      = this.elements.title.value;
      var owner      = this.elements.owner.value;

      var type = $('input:radio[name=ctype]:checked').val() || '';

      alert(type);

    });
});

我的想法是，我会在底部自动生成该类型的表单，所以不要事先知道ID，所以我只是给它们随机数字以使它们唯一。

如何解决这个问题？

Answer 1

您可能只想更改此行：

var type = $('input:radio[name=ctype]:checked').val() || '';

到

var type = $('#create_form input:radio[name=ctype]:checked').val() || '';

这样jQuery只能看到顶层形式，而不是整个DOM。

不确定总体目标是什么，但该编辑至少可以帮助您获得所需的行为。

如果您希望各个保存按钮以类似方式运行，请将其更改为：

var type = $(this).find('input:radio[name=ctype]:checked').val() || '';

修改

要使其他表单起作用，您需要稍微更改一下HTML，以便表单标记包装表，而不是相反。这就是我为每个更改的内容（注意这会产生多个表而不是一个表）：

<form action="" method="post"> <input name="anchor" value="54" type="hidden"> <table class="alerts" cellspacing="0"> <tbody> <tr> <td class="activity-data">54</td> <td class="activity-data"> <input name="title" id="54_title" value="" type="text" /> </td> <td class="activity-data"> <input name="owner" id="54_owner" value="" type="text" /> </td> <td class="activity-data"> <input name="ctype" value="individuel" type="radio" checked/> Individuel <br> <input name="ctype" value="course" type="radio" /> Course </td> <td> <input value="Save" type="submit" /></td> </tr> </tbody> </table> </form>

这样，单选按钮就是表单的正确子项，jQuery很高兴。

Answer 2

每组单选按钮应该有自己的匹配名称，因为它看起来像表单将它们视为单独的组。例如，您的第一组单选按钮可能名为foo：

<input name="foo" id="ctype" value="individuel" type="radio" /> Individuel <br/>
<input name="foo" id="ctypee" value="course"    type="radio" /> Course <br/>

现在这些单选按钮是同一个无线电组的一部分，而其他按钮是另一个组的一部分（尽管它们的名称也应该彼此不同）。现在，您可以安全地从foo无线电组中获取值：

$(document).ready(function(){

   $('form').live('submit', function(){

      var title      = this.elements.title.value;
      var owner      = this.elements.owner.value;

      // looking for 'foo' radio button group selection
      var type = $('input:radio[name=foo]:checked').val() || '';

      alert(type); // alerts the correct selection from the top form
    });
});

Answer 3

如果你看这一行：

<input name="ctype" value="individuel" type="radio" checked/>

你可以看到你已经包含了一个'已检查'属性。删除它以解决您在没有选择时返回'individualuel'的问题。

哦，如果你想预先选择一个值，它应该是

<input name="ctype" value="individuel" type="radio" checked="checked" />

注意：这只是为了增加其他人已经说过的内容。

总是得到错误的单选按钮值。怎么了？

3 个答案: