我如何克隆單選按鈕？

Question

我使用單選按鈕部分克隆字段時遇到問題，這是我的代碼

<div id="optionBook1" class="clonedBook">
            <label for="txtSkillName1">
                <abbr title="Required">
                    <em><font color="red">*</font></em>
                </abbr>
                Skill Name
            </label>
                <input type="text" id="txtSkillName1" name="txtSkillName1" class="validate[required] inputLong"
                runat="server" />

                <p class="power"> 
                <label for="txtSkillLevel">
                    <abbr title="Required">
                        <em><font color="red">*</font></em>
                    </abbr>
                    Skill Level</label>
                <span>
                     <input type="hidden" id="txtSkillLevel1" name="txtSkillLevel1" class="validate[required] inputLong"
                    value="" />
                     <input type="radio" id="radiolvl1" name="radiolvl1" 
                    value="1" />
                     <input type="radio" id="radiolvl2" name="radiolvl2" 
                    value="2" />
                     <input type="radio" id="radiolvl3" name="radiolvl3" 
                    value="3" />
                     <input type="radio" id="radiolvl4" name="radiolvl4" 
                    value="4" />
                     <input type="radio" id="radiolvl5" name="radiolvl5" 
                    value="5" />
                </span>
            </p>
            <p>
                <label for="txtSkillDescription">
                    <abbr title="Required">
                        <em><font color="red">*</font></em>
                    </abbr>
                    Skill Description</label>
                <span>
                    <textarea style="overflow: auto; resize: none" rows="3" cols="50" id="txtSkillDescription1"
                        name="txtSkillDescription1" class="validate[required] inputLong"></textarea>
                </span>
            </p>

            </div>
            <input type="button" id="btnAdd1" value="Add" />
                 <input type="button" id="btnDel1" value="Remove" />

$('#btnAdd1').click(function () {

        // create the new element via clone(), and manipulate it's ID using newNum value
        var newElem = $('#optionBook1').clone().attr('id', 'optionBook2');


        // manipulate the name/id values of the input inside the new element
    $(newElem).find('[id=txtSkillName1]').attr('name', 'txtSkillName2');    
    $(newElem).find('[id=txtSkillName1]').attr('id', 'txtSkillName2');

    $(newElem).find('[id=txtSkillLevel1]').attr('name', 'txtSkillLevel2');    
    $(newElem).find('[id=txtSkillLevel1]').attr('id', 'txtSkillLevel2');

    $(newElem).find('[id=txtSkillDescription1]').attr('name', 'txtSkillDescription2');    
    $(newElem).find('[id=txtSkillDescription1]').attr('id', 'txtSkillDescription2');

        // insert the new element after the last "duplicatable" input field
        $(newElem).insertAfter('#optionBook1');


    });

在這里，我需要隱藏Skilllvl字段。.我想要實現的是每當我單擊單選按鈕時，該值將傳遞到skillvl字段，並且該值將與克隆的Skilllvl字段相同

謝謝

Answer 1

嘗試這個，

JsFiddle演示

$('#btnAdd1').click(function () {

        // create the new element via clone(), and manipulate it's ID using newNum value
        var newElem = $('#optionBook1').clone().find('input:radio').end();
    $(newElem).find('input:radio').each(function(index, attr) { 
      $(this).attr('id',$(this).attr('id')+'_clone');
       $(this).attr('name',$(this).attr('id')+'_clone');

   });


        // manipulate the name/id values of the input inside the new element
    $(newElem).find('[id=txtSkillName1]').attr('name', 'txtSkillName2');    
    $(newElem).find('[id=txtSkillName1]').attr('id', 'txtSkillName2');

    $(newElem).find('[id=txtSkillLevel1]').attr('name', 'txtSkillLevel2');    
    $(newElem).find('[id=txtSkillLevel1]').attr('id', 'txtSkillLevel2');

    $(newElem).find('[id=txtSkillDescription1]').attr('name', 'txtSkillDescription2');    
    $(newElem).find('[id=txtSkillDescription1]').attr('id', 'txtSkillDescription2');

        // insert the new element after the last "duplicatable" input field
        $(newElem).insertAfter('#optionBook1');
$(newElem).attr('id','optionBook2')

    });