Question

单击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');
});

现在这个：//交换一次然后停止然后只是让点击的无线电消失。认为它需要将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/

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

1 个答案: