如果使用jquery选择，则交换无线功能

Question

在radiogroup2中点击单选按钮时，选中的单选按钮应该与id='selectedradio‘的单选按钮交换位置。http://jsfiddle.net/DCC66/14/ http://jsfiddle.net/DCC66/6/ -更新-清晰的单选项行和代码视图正在交换，但取消了fiddle

尝试这样对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');
});

现在这个://交换一次，然后停止，然后只会使点击的无线电消失。我认为它需要将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”的第一行单选按钮交换位置。

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