Question

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

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

需要与FF，Safari，Opera，IE7 + 8兼容（如果可能，则为6，不需要）

更新：页面加载时应隐藏默认选定选项的相应<div>。

更新2 ：现在已解决此问题。非常感谢Joel和ckramer。这两个提出的解决方我选择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

编辑：第一次就做对了。

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

Answer 2

我认为这样的事情会起作用：

$(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之前显示所有具有匹配选择选项值的ID的div。显示的项目列表应该由select中的选项列表绑定，因此不应显示页面上的其他div。

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

2 个答案: