Установите флажок на основе Выбрать значение с помощью jQuery

Question

Мне нужен небольшой скрипт jQuery, который установит соответствующий флажок в зависимости от того, какое значение выбрано при вводе элемента Select.

например. Если значение 'P.J. Барабан Галлахера 'выбирается в select#CAT_Custom_70944, затем проверяется input#drummoyne-list.checkbox. То же самое касается всех опций в списке выбора:

• P.J. Чеки Драммойна Галлахера input#drummoyne-list.checkbox
• P.J. Чеки Галлахера Парраматты input#parramatta-list.checkbox
• чеки Union Hotel North Sydney 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», могут быть легко сопоставлены с идентификаторами флажков.

В отсутствие такого шаблона я создал приведенный ниже код, который соответствует им на основе последовательности, в которой они появляются.

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

Answer 2

Кажется немного избыточным для структурирования входных данных вашей формы, как это - не будет ли проще просто иметь выпадающий список, тогда флажок прямо под ним, который говорит «Подписаться на рассылку»? Вы можете определить правильную подписку на сервере.

Таким образом, код jQuery вообще не требуется.

Answer 3

Создайте функцию, которая вызывается событием «change» в выпадающем меню select, которое обнаруживает выбранное значение и обновляет правильное поле.

Это будет выглядеть примерно так.

$("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...
    }
}