Javascript 如何显示不同复选框的不同下拉列表&；那么当选中多个复选框时会出现不同的下拉列表？

我需要几个复选框，每个复选框都有自己的下拉列表

但当点击几个按钮时，会显示一个完全不同的下拉列表

例如：

选中复选框1时显示下拉列表1 选中复选框2时显示下拉列表2

选中复选框1和复选框2时，显示下拉3

到目前为止，我已经能够 选中复选框1时显示下拉列表1 选中复选框2时显示下拉列表2

及

选中复选框1和复选框2时，显示下拉3

但我尝试编码的两种方式仍然继续显示dropdown1和dropdown3

---

因为看起来您正在使用jQuery，所以您可以删除复选框的

onclick

属性，只需这样做：

$(document).ready(function () {

    $("#checkbox1, #checkbox2").click(function () {
        var check1 = $("#checkbox1").is(":checked");
        var check2 = $("#checkbox2").is(":checked");

        $("#dropdown1").hide();
        $("#dropdown2").hide();
        $("#dropdown3").hide();

        if (check1 && check2) {
            $("#dropdown3").show();
        }
        else if (check1) {
            $("#dropdown1").show();
        }
        else if (check2) {
            $("#dropdown2").show();
        }

    });

});

请参见fiddle:

我刚刚用这种简化的方法创建了一个：

$("#checkbox1, #checkbox2").on("click", function () {
  $("#checkbox1").is(":checked") ? $("#dropdown1").show() 
                                 : $("#dropdown1").hide();
  $("#checkbox2").is(":checked") ? $("#dropdown2").show() 
                                 : $("#dropdown2").hide();
 ($("#checkbox1").is(":checked") && $("#checkbox2").is(":checked")) 
      ? $("#dropdown3").show() : $("#dropdown3").hide();
});

---

在Fiddle中，我留下了控制台日志消息，以显示每次单击时选中的复选框

您应该将

更改为，例如

，或者在使用同一id 3次时更改为不同的id<代码>id必须是唯一的。为什么要混合使用jQuery和“普通”JavaScript

removeAttr（“style”）

不是一个好主意，而

$（“#dropdown1”）.attr（“style”）

根本不起任何作用。您正在使用内联

onclick=…

属性并使用jQuery添加单击处理程序。真让人困惑。非常感谢你的新模型。肯定干净多了！没有你就做不到！