2011-06-22 7 views
2

私はフィールドセット#aのようなプロジェクトに取り組んでいます。チェックボックスのチェック状態を別のフィールドセットにコピー

<fieldset id="a"> 
     <input type="checkbox" name="c1" value="v1" checked="checked" /> 
     <input type="checkbox" name="c2" value="v2"/> 
     <input type="checkbox" name="c3" value="v3"/> 
</fieldset> 

このフィールドセット#aのチェックボックスが:チェックされている値はダイナミックです。

私は別のフィールドセット#bを同じページに持っています。

は、私が欲しいのは/コピーチェックボックスを割り当てることです:ページのロードにシリアル #Bフィールドセットするフィールドセット#Aから値をチェックされています。 [どちらのフィールドセットも同じ数のチェックボックスを持っています。 ]

<fieldset id="b"> 
     <input type="checkbox" name="cc1" value="vv1"/> 
     <input type="checkbox" name="cc2" value="vv2"/> 
     <input type="checkbox" name="cc3" value="vv3"/> 
</fieldset> 

どうすればいいですか?ありがとう。

答えて

3

あなたが言及したセレクタを使用して、それぞれの値をループし、インデックスを取得し、それらのインディケータに従って次のフィールドセットのチェックボックスを更新することができます。

$('fieldset#a input[type="checkbox"]:checked').each(function(){ 
    $('fieldset#b input[type="checkbox"]').eq($(this).index()).prop('checked',true); 
}); 

例:http://jsfiddle.net/niklasvh/hHnLu/

+0

ありがとうNiklas!それは完璧に動作します:) – MANnDAaR

+0

@MANnDAaR私はちょうどそれを少し前に編集し、その代わりに使用します。 – Niklas

+0

フィールドセット#bでチェックボックスがオンになっていると、コードが失敗します。私のことを確認しましょう:http://jsfiddle.net/nPnMa/あなた:http://jsfiddle.net/NVPN6/ – CoolEsh

0

あなたはこのようなものを使用することができますので、私はアプローチの下にしようとした

$('#b').children('input:checkbox').each(function(i) { 
    var aChecked = $('#a').children('input:checkbox').eq(i).prop('checked'); 
    if (aChecked) 
    { 
     $(this).prop('checked', true); 
    } 
    else 
    { 
     $(this).removeProp('checked'); 
    } 
}); 
+0

こんにちはCoolEsh!ご回答有難うございます。これはperefectでも動作します:) – MANnDAaR

+0

フィールドセット#bでスクリプトの実行前にどのチェックボックスがチェックされているか気にしなければ、@ニクラスのコードは完璧に動作します。 – CoolEsh

0

は、私はものが作業上を取得することができませんでしたし、このよう

出来た。

// lets uncheck all the checkboxes in first fieldset                        
$('#b input[type=checkbox]').removeProp('checked');          

    cj('#b [type=checkbox]').each(function() { 
    if (cj(this).prop('checked')) { 
     // here get the index of current element 
     // then modify below code to set prop checked 
     cj('#a [type=checkbox]').prop('checked',true); 
    } 
}); 

関連する問題