如何顯示或隱藏多個複選框和多個複選框

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

Answer 2

試試這個：使用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 3

嘗試

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 4

首先，裏面你script的this範圍是document不是checkboxes。 然後，你要的行爲綁定到checkboxes及以上的所有，使用class代替id小號 否則你會生氣 這樣：

<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部分：

<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部分：

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