Question

如果选中至少一个复选框，我想显示输入组标题，如果没有选中复选框，则隐藏标题。每个组都有自己的标题和数据值。可能有5个以上的输入组。

Here is the codepen: [Example code here][1]


[1]: https://codepen.io/anon/pen/JyrQgW

$(document).ready(function(){
  
});

.output {
  margin-top:45px;
}

<div class="group-block" data-value="1">
  <h1 class="group-title" data-value="1">group1</h1>
  <input type="checkbox" data-value="1">item1
  <input type="checkbox" data-value="1">item2
  <input type="checkbox" data-value="1">item3
  <input type="checkbox" data-value="1">item4
</div>

<div class="group-block" data-value="2">
  <h1 class="group-title" data-value="2">group2</h1>
  <input type="checkbox" data-value="2">item1
  <input type="checkbox" data-value="2">item2
  <input type="checkbox" data-value="2">item3
  <input type="checkbox" data-value="2">item4
</div>

<div class="output">HERE SHOW TITLES</div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

enter code here

最后，我对JS / Jquery不太满意，但是我试图让它工作几个小时并感觉我走得很深但是有一个2行解决方案。

感谢您的帮助

Answer 1

试试这个：

$(document).ready(function(){
  $('.group-block h1').hide();
  $('.output').click(function(){
    $('.group-block h1').hide();
    $('input[type=checkbox]:checked').closest('.group-block').find('h1').show();
  });
});

建议：您可能希望最初使用CSS隐藏标题。

Answer 2

我这就是你要找的东西？

$(document).ready(function() {
  check()
});
$("input[type=checkbox]").change(function() {
  check()
})

function check() {
  $(".group-block").each(function() {
    $(this).find(".group-title").css("display", $(this).find("input[type=checkbox]:checked").length ? "block" : "none")
  })
}

它会检查是否已在.ready()和.change()语句中选中任何复选框，并显示或隐藏标题取决于结果。

$(document).ready(function() {
  check()
});
$("input[type=checkbox]").change(function() {
  check()
})

function check() {
  $(".group-block").each(function() {
    $(this).find(".group-title").css("display", $(this).find("input[type=checkbox]:checked").length ? "block" : "none")
  })
}

.output {
  margin-top: 45px;
}

<div class="group-block" data-value="1">
  <h1 class="group-title" data-value="1">group1</h1>
  <input type="checkbox" data-value="1">item1
  <input type="checkbox" data-value="1">item2
  <input type="checkbox" data-value="1">item3
  <input type="checkbox" data-value="1">item4
</div>

<div class="group-block" data-value="2">
  <h1 class="group-title" data-value="2">group2</h1>
  <input type="checkbox" data-value="2">item1
  <input type="checkbox" data-value="2">item2
  <input type="checkbox" data-value="2">item3
  <input type="checkbox" data-value="2">item4
</div>

<div class="output">HERE SHOW TITLES</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

来自coment的演示2

$(document).ready(function() {
  check()
});
$("input[type=checkbox]").change(function() {
  check()
})

function check() {
  $(".output").text("");
  $(".group-title").hide();

  $(".group-block").each(function() {
    if ($(this).find("input[type=checkbox]:checked").length)
      $(".output").text($(".output").text() + $(this).find(".group-title").text())
  })
}

.output {
  margin-top: 45px;
}

<div class="group-block" data-value="1">
  <h1 class="group-title" data-value="1">group1</h1>
  <input type="checkbox" data-value="1">item1
  <input type="checkbox" data-value="1">item2
  <input type="checkbox" data-value="1">item3
  <input type="checkbox" data-value="1">item4
</div>

<div class="group-block" data-value="2">
  <h1 class="group-title" data-value="2">group2</h1>
  <input type="checkbox" data-value="2">item1
  <input type="checkbox" data-value="2">item2
  <input type="checkbox" data-value="2">item3
  <input type="checkbox" data-value="2">item4
</div>

<div class="output">HERE SHOW TITLES</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Jquery / JS如果至少检查一个或多个，则显示动态复选框输入组标题，反之亦然

2 个答案: