列表中的单选按钮不分组

Question

我这里有一个非常讨厌的问题！

我有一个<ul>，每个<li> 都有一组输入。在每个列表元素中都有一个单选按钮，我想将它们组合在一起以使它们在单击时切换。

问题是无线电无法连接！如果我单击其中两个，它们都会被选中！

这是代码：http://jsfiddle.net/bakaburg1/Djq5q/1/

注意：这是 wordpress 自定义字段的代码。

非常感谢！

编辑1： 重要的是每个列表元素中的字段保持连接，以便在 PHP 端我得到这样的数据结构：

array (
  0 => 
  array (
    'answer' => 'answer1',
  ),
  1 => 
  array (
    'answer' => 'answer2',
  ),
  2 => 
  array (
    'is_right' => 'on',
    'answer' => 'answer3',
  ),
  3 => 
  array (
    'answer' => 'yiuyiuyiuj',
  ),
)

编辑2： 目前我用一些 jQuery 修补了这个问题：

jQuery('.mm_ps_answers input:radio').click(function(){
 jQuery(this).parents('ul').find('input:radio').not(this).attr('checked', false)
})

虽然不确定最优雅的解决方案，但也可以随意评论（不回答）这个 sn-p！

编辑3： 我通过给字段赋予三个不同的名称解决了这个问题，然后将 POST 的数据合并到一个数组中，然后序列化并保存在数据库中。

<li>
    <a class="mm_ps_move button"><img src="http://localhost:8888/minimamedicamenta/wp-content/themes/minima/img/move.png"></a>
    <a class="mm_ps_delete_answer button">Delete Answer</a>
    <input type="radio" class="mm_ps_is_right" name="mm_ps_answers_is_right[]">
    <input type="text" name="mm_ps_answers_input[]" value="">
    <input type="hidden" name="mm_ps_answers_impressions[]">
    <span class="mm_ps_impressions">impressions: <span>0</span></span>
</li>

虽然弹出了另一个问题......虽然文本输入字段后端的 POST 数据是一个有序数组，每个字段都有一个值，也包括空字段，单选按钮只发送一个值，所以我不知道已经检查了 wich 列表元素中的 wich 收音机，对此有什么帮助吗？这是 POST 中三个输入的数据（值是随机字符串）：

[04-Aug-2012 17:18:45] Line  (in ):
array (
  0 => 'cvxcv',
  1 => 'vs',
  2 => '',
  3 => 's',
)
[04-Aug-2012 17:18:45] Line  (in ):
array (
  0 => 'on',
)
[04-Aug-2012 17:18:45] Line  (in ):
array (
  0 => '',
  1 => '',
  2 => '',
  3 => '',
)

编辑4： 我使用 javascript 修复了问题，该 javascript 为修改列表的每个操作（排序、添加、删除元素）上的单选按钮分配了一个递增的数值。虽然不是很干净。

Answer 1

要将单选按钮组合在一起，您必须在名称属性中指定相同的值。

例如。 （来自 W3Schools）

<form action="">
<input type="radio" name="sex" value="male" /> Male<br />
<input type="radio" name="sex" value="female" /> Female
</form>

编辑： 为了保持您在提供的 jsFiddle 链接中计划的顺序，我建议您对一个列表项进行迭代声明： （抱歉php代码不正确，但我很久没用了）

foreach($answer as $value){
<li>
    <input type="radio" name="answer" value="$value[is_right]">
    <input type="text" name="$value[answer]" value="jkjhk">
    <span class="mm_ps_impressions">impressions: </span>
</li>
}

Answer 2

如果由于某种原因无法使用 name 属性（例如，您的 name 属性是动态填充的 - 我怀疑是这样），您可以使用 jQuery 来切换复选框：

$(document).ready(function() {
    $('input[type="radio"]').click(function() {
      $('input[type="radio"]').prop('checked', false);
      $(this).prop('checked', true);        
    });        
});

Answer 3

<ul class="mm_ps_answers manage_list ui-sortable">
<li>
    <input type="radio" name="SameName">
    <input type="text" name="mm_ps_answers[0][answer]" value="jkjhk">
    <span class="mm_ps_impressions">impressions: </span>
</li>
<li>
    <input type="radio" name="SameName">
    <input type="text" name="mm_ps_answers[1][answer]" value="lknjlk">
    <span class="mm_ps_impressions">impressions: </span>
</li>
<li>
    <input type="radio" name="SameName">
    <input type="text" name="mm_ps_answers[2][answer]" value="òklkjl">
    <span class="mm_ps_impressions">impressions: </span>
</li>
<li>
    <input type="radio" name="SameName">
    <input type="text" name="mm_ps_answers[3][answer]" value="p09i0i">
    <span class="mm_ps_impressions">impressions: </span>
</li>

使浏览器切换它们的属性是单选按钮的名称。将所有这些单选按钮命名为相同（每个组应具有相同的名称），它们将切换。