Question

我有一个Java风格的循环，在主页上有一个带有文本和复选框的列表。所以我有一组复选框。当我点击任意复选框时，我必须显示消息，但在我的变体消息中仅在我点击第一个复选框时显示。

循环中的我的复选框

int

我的剧本

<c:forEach items="${sessionScope.flights}" var="flight">
    <input type="checkbox" class="deleteBox"/>
 </c:forEach>

消息div

$(".deleteBox").change(function(){
        $("#deletePanel").each(function(index, element){
            if($(".deleteBox").prop("checked")){
                console.log("true");
                $("#deletePanel").css("display","inline");
            }else{
                $("#deletePanel").css("display","none");
                console.log("false");
            }
        });
    });

Answer 1

您可以使用.toggle()：

$(".deleteBox").change(function(){
    $("#deletePanel").toggle(this.checked); 
});

Answer 2

试试这个：

$(".deleteBox").change(function(){
    // use $(this) to check state of current changed checkbox
    if($(this).prop("checked")){
      console.log("true");
      $("#deletePanel").css("display","inline");
    }else{
      $("#deletePanel").css("display","none");
      console.log("false");
    }
});

由于您只有一个#deletePanel，因此您不需要每个功能 - 只需检查是否在更改时选中了删除复选框，并显示该消息是否为

更新

根据评论，我会这样做：

$(".deleteBox").change(function(){
  if($(".deleteBox:checked").length){
    console.log("true");
    $("#deletePanel").css("display","inline");
  }else{
    $("#deletePanel").css("display","none");
    console.log("false");
  }
});

循环中的jQuery元素

2 个答案: