新しいラジオチェックのクローンと変更

Question

まず、htmlを編集するのではなく、JavaScript/jQueryを使用してこれを実現します。

デフォルトで1つの入力が選択（チェック）されており、この例では「Express Shipping」です。次に、htmlのすべてが、入力を保持している< li>である親の中から複製/コピーされます。私は< li>その中の入力だけをコピーする必要はありません。

これは＃dumpfofo< div>内に配置されます。

私はこの時点まで管理することができますが、両方のラジオボタンを切り替えると、ラジオボタンを追加すると、チェックされた入力の完全なHTMLに加えて、< li> #dumpinfohereセクション。

これは私がこれを試してみて、達成するためにやったコードです：

JSFiddle. You can view what I've done here.

HTML

<ul id="shipping_method"> 
    <li> 
    <input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_betrs_shipping_12-1" value="betrs_shipping_12-1" class="shipping_method "> Free Shipping 
    </li> 
    <li> 
    <input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_betrs_shipping_12-2" value="betrs_shipping_12-2" class="shipping_method" checked="checked"> Express Shipping 
    </li> 
</ul> 

Javascriptを

jQuery(document).ready(function($){ 
    var changeShip = function() { 
    $('#shipping_method input:checked') 
     .parent() 
     .clone() 
     .appendTo(".woocommerce-billing-fields #dumpinfohere"); 
    }; 

    $('#shipping_method input').change(changeShip); 

    changeShip(); 
}); 

CSS

#shipping_method { 
    float: left; width: 100%; 
    list-style: none; 
    padding: 0px; 
} 
#shipping_method li { 
    /* display: none; */ 
    float: left; width: 100%; 
    background: #ccc; 
    padding: 5px 10px; 
} 
#shipping_method .red { background: red; } 

.woocommerce-billing-fields { 
    background: #000; color: #fff; 
    width: 100%; height: 300px; 
    padding: 5px 10px; 
    float: left; 
} 

.woocommerce-billing-fields li { padding: 10px 0px; color: #e024a7; list-style: none; } 
.woocommerce-billing-fields li input { display: none; } 

しかし、あなたはそれが/変更するには、テキストを置き換えるものではありません2つのラジオボタンを切り替えるのではなく、単にそれに追加している場合あなたが見ることができますか？

jQuery(document).ready(function($){ 
    var changeShip = function() { 
    $("#dumpinfohere").html(''); 
    $('#shipping_method input:checked') 
     .parent() 
     .clone() 
     .appendTo(".woocommerce-billing-fields #dumpinfohere"); 
    }; 

    $('#shipping_method input').change(changeShip); 

    changeShip(); 
}); 

基本的に、あなたはどんな新しいを追加する前に、コンテナを空にする必要があります：あなたはちょうどだからあなたの最終的なコードは次のようになり

var changeShip = function() { 

後

$("#dumpinfohere").html(''); 

を追加する必要が

Answer 1

その中のテキスト。