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

Question

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

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

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

我在想我可以尝试这样的事情：

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

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

Answer 1

您可以找到所有选中的复选框，而不是遍历它们。然后为它们中的每一个找到相关的 div，并显示它。

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

每次单击按钮时，都会从每个响应 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>