jQueryを使用して選択値に基づいてチェックボックスをチェックしてください

Question

私は、要素選択入力でどの値が選択されているかに基づいて適切なチェックボックスをチェックする小さなjQueryスクリプトの後です。

など。 'P.J. Gallagher's Drummoyne 'がselect#CAT_Custom_70944に選択されている場合はinput#drummoyne-list.checkboxがチェックされています。選択リストのすべてのオプションについても同様です。

• 'P.J.ギャラガーズ・ドラモイン 'チェックinput#drummoyne-list.checkbox
• ' P.J.ギャラガーのパラマタ」チェックinput#parramatta-list.checkbox
• 組合ホテルノースシドニー "チェックinput#union-list.checkbox

は、誰もがこのような何かが前に行って見ていますか？サンプルHTMLコード：

<div class="item"> 
    <label for="CAT_Custom_70944">Preferred GMH Hotel <span class="req">*</span></label><br /> 
    <select name="CAT_Custom_70944" id="CAT_Custom_70944" class="cat_dropdown"> 
     <option value=" " selected="selected">- Please Select -</option> 
      <option value="P.J. Gallagher's Drummoyne">P.J. Gallagher's Drummoyne</option> 
     <option value="P.J. Gallagher's Parramatta">P.J. Gallagher's Parramatta</option> 
     <option value="Union Hotel North Sydney">Union Hotel North Sydney</option> 
    </select> 
</div> 
<div class="item"> 
    <input type="checkbox" id="drummoyne-list" class="checkbox" name="CampaignList_20320" /> <label>Subscribe to: P.J. Gallagher's Drummoyne Newsletter</label> 
</div> 
<div class="item"> 
    <input type="checkbox" id="parramatta-list" class="checkbox" name="CampaignList_20321" /> <label>Subscribe to: P.J. Gallagher's Parramatta Newsletter</label> 
</div> 
<div class="item"> 
    <input type="checkbox" id="union-list" class="checkbox" name="CampaignList_20322" /> <label>Subscribe to: The Union Hotel Newsletter</label> 
</div> 

Answer 1

jQueryはパターンに従うと効果的です。たとえば、 "drummoyne"、 "parramatta"、 "union"のような単純なドロップダウンのオプション値は、チェックボックスのIDと簡単に一致させることができます。

このようなパターンが存在しない場合、以下のコードを作成して、それらが表示される順序に基づいて一致させます。

$(function(){ 
    $('select.cat_dropdown').change(function(){ 
    $('.item :checkbox').removeAttr('checked'); //uncheck the other boxes 
    $('.item :checkbox')[this.selectedIndex-1].checked = true; 
    }); 
}); 

Answer 2

選択した値を検出し、正しいボックスを更新を選択し、ドロップダウンメニューの「変更」イベントによってトリガーされた関数を作成します。

このようになります。

$("select#CAT_Custom_70944").change(function() { 
    var val = this.value; 
    if (val == "P.J. Gallagher's Drummoyne") { 
     // Code to check correct box... 
    } else if (val == "P.J. Gallagher's Parramatta") { 
     // Code to check correct box... 
    } else { 
     // Code to check correct box... 
    } 
} 

Answer 3

はこのようなフォームの入力を構造化するために少し冗長なようだ - それだけでドロップダウンを持っていることが容易ではないでしょう、そして、直接その下のチェックボックスは、「ニュースレターを購読」と言いますか？サーバー上で正しいサブスクリプションを推論することができます。

こうして、jQueryコードはまったく必要ありません。