Question

我有一个要求，我有多个复选框。我有一组与标签相关的复选框相关内容。页面加载时，将显示所有标记相关内容。用户选择任何复选框后然后只会显示与该复选框相关的内容，并且剩余将隐藏。接下来，当用户选择第二个复选框时，将显示第二个复选框相关内容。

以下是标记内容，我有20个标记

<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个标签，我试过很多方面。

请在这方面帮助我，非常感谢任何帮助..

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

Answer 2

尝试

var first = true;
$('input[type="checkbox"][name^=chk]').change(function () {
    var $target = $('#sb' + this.id.replace('chk', '')).toggle(this.checked);
    if (first) {
        $('p[id^=sb]').not($target).hide();
        first = false;
    }
})

演示：Fiddle

Answer 3

尝试此操作：使用jQuery start with selector并先隐藏所有内容，然后显示相应的内容。

<script>
       $(document).ready(function()
       {
           //hide all contents
           $('p[id^=sb]').hide();

           $('input[id^=chk]').change(function(){

              // get checkbox index
              var index = $(this).attr('id').replace('chk','');

              //show respective contents
              if($(this).is(':checked'))
                $('#sb'+index).show();
              else
                $('#sb'+index).hide();
           });

        });
  </script>

<强> Demo

Answer 4

首先，在您script范围内this范围是document而不是checkboxes。然后，您必须将行为绑定到checkboxes，最重要的是，使用class代替id s 或者你会生气所以：

<pre>
  <p class="sb">Checkbox content one</p>
  <p class="sb">Checkbox content two</p>
  ...
</pre>

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

然后：

$(function(){

 $("#chk1").on('change', function(){
    if($(this).prop('checked'))
     $(".sb").hide();
     $(".sb").eq(0).show();
 })

 $("#chk2").on('change', function(){
    if(!$(this).prop('checked'))
     $(".sb").eq(0).hide();
     $(".sb").show();
 })
})

这是一个小提琴：http://jsfiddle.net/8sm8njjs/1

使用你的代码情况有点棘手，也许试着解释你想要实现的目标

Answer 5

<强> DEMO

Html Part：

<pre>
<p id="sb1">Checkbox content one</p>
<p id="sb2">Checkbox content two</p>
<p id="sb3">Checkbox content three</p>
<p id="sb4">Checkbox content four</p>
</pre>

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

Javascript Part：

$(document).ready(function()
{
    $('p').hide();

    $('#chk1').change(function(){ 
        var tags=$("#sb1,#sb2");
       if($(this).attr('checked'))
       {
           tags.show();
       }
        else{
           tags.hide();
       }
    });

    $('#chk2').change(function(){ 
       var tags=$("#sb3,#sb4");

       if($(this).attr('checked'))
       {
           tags.show();
       }
        else{
            tags.hide();
       }
    });
});

如何显示或隐藏具有多个复选框的多个div

5 个答案: