jquery - 如何显示或隐藏带有多个复选框的多个 div

Question

我有一个要求，即我有多个复选框。我有一组与复选框相关的内容，位于 <p> 中标签。当页面加载所有<p>时将显示标签相关内容。当用户选择任何复选框后那么只有与复选框相关的内容才会显示，其余内容将隐藏。接下来，当用户选择第二个复选框时，将显示第二个复选框相关内容。

下面是<p>像这样的标签内容我有 20 <p>标签

<p id="sb1">Checkbox content one</p>
<p id="sb2">Checkbox content two</p>

<input name="chk1" type="checkbox" id="chk1" value="">chekme1
<input name="chk2" type="checkbox" id="chk2" value="">checkme2

这是我的代码

$(document).ready(function()
{
    if($(this).prop('checked'))
    {
        $('#chk1').prop('checked', true);
        $("#sb2,#sb3,#sb4,#sb5,#sb6,#sb7,#sb8,#sb9,#sb10").hide();
    }
    else
    {
        $('#chk2').prop('checked', false);
        $("#sb1,#sb3,#sb4,#sb5,#sb6,#sb7,#sb8,#sb9,#sb10").show();
    }
});

有人可以帮助我吗，像这样我有 20 个复选框和 20 <p>标签，我尝试了很多方法。

请在这方面帮助我，任何帮助将不胜感激..

Answer 1

HTML

   <p id="sb1"  class="p_element">Checkbox content one</p>
   <p id="sb2"  class="p_element">Checkbox content two</p>

   <input name="chk1" class="check_box" type="checkbox" data-ptag="sb1" id="chk1" value="">chekme1
   <input name="chk2"  class="check_box" type="checkbox" data-ptag="sb2" id="chk2" value="">checkme2

jQuery

$('.check_box').change(function(){
if($('.check_box:checked').length==0){
    $('.p_element').show(); //Show all,when nothing is checked
}else{
    $('.p_element').hide();
    $('.check_box:checked').each(function(){
        $('#'+$(this).attr('data-ptag')).show();
    });
  }

});

FIDDLE DEMO