JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/ui-lightness/jquery-ui.css">
<div id="radios">
    <form>
        <input type='radio' name='test' value='1' />
        <input type='radio' name='test' value='2' checked='checked'/>
        <input type='radio' name='test' value='1' />
        <input type='radio' name='test' value='1' />
        <input type='text' />
        <select>
            <option>1</option>
            <option>2</option>
        </select>
        <input type="checkbox" />
        <input type="checkbox" checked="checked" />
    </form>
</div>
<input id="input" type="checkbox" checked="checked" />
Select a different element above then <button id="wrap">wrap</button>

JavaScript

$('#wrap').click(function() {
    $("#radios").wrap("<div>");
    $("#input").wrap("<div>");
});

(function($) {
    var _append = $.fn.append;

    function getChecked(el) {
        if (el && el.jquery) {
            return el.length == 1 && el[0].nodeName == "INPUT" && el[0].checked ? el : el.find('input:checked');
        }
        return $();
    }

    $.fn.append = function(arg) {
        var chk = getChecked(arg),
            ret = _append.apply(this, arguments);
        getChecked(arg).removeAttr('checked');
        chk.attr('checked','checked');
        return ret;
    };
})(jQuery);