Когда опция выбора поля выбрана, скрыть и снять соответствующий флажок, используя jQuery

Question

Когда опция выбрана, соответствующий флажок <div> автоматически скрывается с помощью jQuery. Например, пользователь выбирает элемент 1 из поля выбора, и <div class="item1"> сразу скрывается.

Предостережение: Оба будут видны, поэтому пользователь, изменяющий опцию выбора, должен учитываться (например, пользователь выбирает опцию, соответствующий флажок которой уже отмечен). Проверенное состояние должно быть удалено, а соответствующий <div> должен скрыться.

Требуется совместимость с FF, Safari, Opera, IE7 + 8 (6, если возможно, не требуется)

Обновление : соответствующий <div> выбранной по умолчанию опции должен быть скрыт при загрузке страницы.

Обновление 2 : теперь это решено. Огромное спасибо Джоэлу и Кракрамеру. Оба предложенных решения работают отлично. Я выбрал решение ckramer в качестве принятого ответа, потому что оно не требовало дополнительной разметки, но оба решения отлично работают!

<select>
  <option selected="selected" id="item1" value="1">Item 1</option>
  <option id="item2" value="2">Item 2</option>
  <option id="item3" value="3">Item 3</option>
</select>

<div class="item1">
  <input type="checkbox" id="a-item1" value="5" />
  <label class="checkbox" for="a-item1">Item 1</label> 
</div> 

<div class="item2">
  <input type="checkbox" id="a-item2" value="6" />
  <label class="checkbox" for="a-item2">Item 2</label> 
</div>

<div class="item3">
  <input type="checkbox" id="a-item3" value="7" />
  <label class="checkbox" for="a-item3">Item 3</label> 
</div>

Answer 1

Я думаю, что-то вроде этого будет работать:

$(document).ready(function() {
    dealWithSelect($("select").find("option:selected").attr("id"));

    $("select").change(function(){
        var selectedId = $(this).find("option:selected").attr("id");
        $(this).find("option").each(function() {
            var optionId = $(this).attr("id");
            // could probably also use $("."+optionId).show(); here
            $("div."+optionId).show(); 
        });
        dealWithSelect(selectedId);
    });
});

function dealWithSelect(selectedId) {
    $("."+selectedId).hide().find(":checkbox:checked").attr("checked","");
}

Обновление для решения вопросов в комментариях

Я обновил оригинальный блок кода, так что все это собрано. Чтобы обратиться к начальному состоянию, у нас есть функция dealWithSelect. Я выбрал немного другой подход для решения вашей второй проблемы, который заключается в отображении всех элементов div, идентификаторы которых соответствуют значениям параметра выбора до , скрывающих соответствующий элемент div. Список отображаемых элементов должен быть связан списком параметров в элементе select, поэтому другие элементы div на странице не должны отображаться.

Answer 2

Редактировать: правильно с первого раза.

$("select").change(function() {
    var selected = $(this).val(); // 1, 2, 3, etc.     

    $("div:not(:visible)").show(); // show all
    // if you add a class to the checkbox divs (i.e. "selectdiv") replace with: "div.selectdiv"  

    $(".item" + selected) // get the div
        .hide()
        .find("input:checked") // find the checkbox inside the div
        .removeAttr("checked"); // uncheck the checkbox
});

К обновлению:

$(function() {
    $(".item" + $("select").val()).hide()
});