Question

我尝试创建一个函数，找到以值开头的所有选中复选框，并显示隐藏在下面的相应div。

我有一个例子从这里开始： Demo：https://jsfiddle.net/3wf34nbf/3/

在示例中，如果选中第一个复选框，我想在下面显示对该复选框的响应。第二个复选框也会发生同样的情况。

我以为我可以尝试这样的事情：

.find("div[id^=$(this)]")

然后将css更改为display:block，但这不起作用

Answer 1

您可以找到所有选中的复选框，而不是迭代它们。然后，对于他们每个人，你可以找到相关的div，并显示它。

为了显示它，我添加了类 visible ，这样如果 response 类也有类可见，你可以看到它，否则它不可见。

每次单击该按钮，都会从每个响应div中删除可见类，以便在显示所需的div之前隐藏所有div。

function postResponse() {
  $(".response").removeClass('visible');
  $("input[type=checkbox]:checked").each(function(){
    $("#"+$(this).attr('id')+"Response").addClass('visible');    
  });
}

.response:not(.visible) {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <label for="test1">Test1</label>
  <input type="checkbox" id="test1">
  <label for="test2">Test2</label>
  <input type="checkbox" id="test2">
  <div class="responseContainer">
    <div class="response" id="test1Response">
      Response for Test1
    </div>
    <div class="response" id="test2Response">
      Response for Test2
    </div>
  </div>
  <div>
    <button type="button" onclick="postResponse()">
      Post Data
    </button>
  </div>
</form>

Javascript找到检查并显示相应的div

1 个答案: