Question

我在这里遇到了一个非常讨厌的问题！

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

问题是无线电无法连接！如果我点击其中两个，他们都会被检查！

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

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

非常感谢！

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

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

EDIT2：暂时我用一些jQuery修补了这个问题：

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

不确定最优雅的解决方案，也可以在这个片段上发表评论（不回答）！

EDIT3：我通过给字段赋予三个不同的名称，然后将一个数组中的POSTed数据合并然后序列化并保存在数据库中来解决问题。

<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>

另一个问题虽然加快了......虽然文本输入字段后端的POSTed数据是一个排序良好的数组，每个字段都有一个值，也就是空字段，radiobutton只发送一个值，所以我我不知道哪个列表元素已被检查过，对此有何帮助？这是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 => '',
)

EDIT4：我用javascript修补了问题，这个javascript为每个修改列表的行为（排序，添加，删除元素）上的单选按钮分配增量数值。虽然不是很干净。

Answer 1

<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>

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

Answer 2

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

离。（来自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 3

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

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

列表中的单选按钮不分组

3 个答案: