0

单击 radiogroup2 中的单选按钮时，所选收音机应与 id='selectedradio' 的收音机交换位置。小提琴http://jsfiddle.net/DCC66/6/ --- 更新 --- 无线电行和代码的清晰视图正在交换但取消http://jsfiddle.net/DCC66/14/

试过这个来排序 id 问题：http: //jsfiddle.net/DCC66/18/

$(".radiogroup2 input[type='radio']").on('click', function () {
    $('#radioselected').closest('label').before($(this).closest('label'));
    $(this).closest('label').after($('#radioselected').closest('label'));
    $(this).attr('domaintype', 'radioselected');
    $('radioselected').attr('radioselected', 'domaintype');
});

现在 this:// 交换一次然后停止，然后只是使单击的收音机消失。认为它需要将 id="radioselected" 添加到新交换的收音机中。虽然只更换收音机，但仍然没有交换。

$(".radiogroup2 input[type='radio']").on('click', function () 
{
    $('#radioselected').closest('label').replaceWith($(this).closest('label'));
});

尝试使用克隆仍然没有运气：

$("div.radiogroup2 input[name='domain_ext']").click(function () 
{
    $(this).clone('#radioselected').after(this);
});

原来的

$("div.radiogroup2 input[name='domain_ext']").click(function() 
{ 
    //only if a the radio in radiogroup to are clicked take radio and swap with id='radioselected'
    if  ($(this).prop('checked')) 
    {
        $(this).after('#radioselected').add(this);
        $('#radioselected').after(this);
    }
});

因此，在“交换”行中单击的任何收音机都应与第一行中 ID 为“selectedradio”的收音机切换位置

4

1 回答 1

1

使用委托而不是直接在单选按钮上绑定事件。这样，交换到 div 中的单选按钮也将起作用。

使用该closest方法获取单选按钮周围的标签。

从您交换的单选按钮中删除 id，并将其添加到选定的单选按钮。

使用after方法将标签移动到所选标签旁边的第二个列表中，然后使用prependTo将带有所选单选按钮的标签移动到第一个列表中。

您有一些无效的 HTML 代码使行交换位置。更改<td><tr>为<tr><td>。

$("div.radiogroup2").on("click", ":radio", function () {
  var l = $(this).closest('label');
  var r = $('#radioselected');
  r.removeAttr('id');
  l.after(r.closest('label'));
  $(this).attr('id', 'radioselected');
  l.prependTo('.radiogroup1');
});

演示：http: //jsfiddle.net/DCC66/16/

于 2013-03-16T23:34:46.830 回答