选择“选择”框选项时，使用jQuery隐藏和取消选中相应的复选框

Question

选择选项时，使用jQuery自动隐藏相应的复选框@ 987654321。例如，用户从选择框中选择项目 1，<div class="item1"> 立即隐藏。

警告：两者都是可见的，因此必须考虑更改选择选项的用户（例如，用户选择了相应复选框已被选中的选项）。必须删除选中状态，并隐藏相应的<div>。

需要兼容FF、Safari、Opera、IE7+8（可以的话6个，不需要）

更新：默认选中选项对应的<div>应该在页面加载时隐藏。

更新 2：现已解决。非常感谢 Joel 和 ccramer。两种提议的解决方案都可以完美运行。我选择 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","");
}

更新以解决 cmets 中的问题

我已经更新了原始代码块，所以它们都放在一起了。为了解决初始状态，我们得到了dealWithSelect 函数。我选择了一种稍微不同的方法来解决您的第二个问题，即在隐藏适当的 div 之前显示所有具有与选择选项值匹配的 Id 的 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()
});