Saya ingin menampilkan judul grup input jika setidaknya satu kotak centang dicentang, dan sembunyikan judul jika tidak ada kotak centang yang dicentang. Setiap kelompok memiliki judul dan nilai datanya sendiri. Mungkin ada 5+ grup masukan.

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

Pada akhirnya, saya tidak begitu baik dengan JS/Jquery tetapi saya mencoba membuatnya bekerja selama beberapa jam dan merasa bahwa saya masuk sangat dalam tetapi ada solusi 2 baris.

Terimakasih atas bantuannya

-1
Gabriel747 15 Agustus 2017, 11:04

2 jawaban

Jawaban Terbaik

Aku ini yang kamu cari?

$(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")
  })
}

Ini akan memeriksa apakah ada kotak centang yang telah dicentang pada pernyataan .ready() dan .change(), dan menampilkan atau menyembunyikan judul tergantung pada hasilnya.

$(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>

Demo 2 dari komentar

$(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>
0
Carsten Løvbo Andersen 15 Agustus 2017, 08:55

Coba ini:

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

Saran: Anda mungkin ingin menyembunyikan judul pada awalnya dengan CSS.

0
kinggs 15 Agustus 2017, 08:11