隱藏div複選框之前檢查

Question

我是新來的編程，我有一個問題，我無法解決。基本上我希望Divs被隱藏或顯示，基於用戶是否點擊複選框。該代碼的作品，但問題是，所有我的div隱藏而不是顯示時點擊複選框。我怎樣才能解決這個問題？我希望它們在加載頁面時不顯示，只在點擊時顯示。在頁面加載

 function checkSelect(el) { 
 
      if ($('#all').prop('checked') == true) { 
 
       $('#all').prop('checked', false); 
 
       $(el).show(); 
 
      } 
 
     } 
 

 
     function showSelect(el) { 
 
      checkSelect('.box'); 
 
      
 
\t \t \t var val = $(el).data('tags');  
 
      $('div[class$="' + val + '"]').toggle('slow'); 
 
     } 
 
     
 
     
 
     
 
     $(function() { 
 
      // Setze Startbedingung 
 
      $('#all').prop('checked', false); 
 
      
 
      // Auswahl 
 
      $('#checkform input').change(function() { 
 
       showSelect(this); 
 
      }); 
 
      
 
      // Reset oder All 
 
      $('#resetform input').change(function() { 
 
       $('#checkform input').prop('checked', false); 
 
       if ($(this).prop('checked') == true) { 
 
        $('.box').show('slow'); 
 
       } 
 
       else { 
 
        // do nothing 
 
        $(this).prop('checked', false); 
 
       } 
 
      }); 
 
     });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="checkform"> 
 
     <form> 
 
      <h1>Worüber möchtest du von uns lesen?</h1> 
 
      <fieldset> 
 
       <ul> 
 
        <li> 
 
         <input type="checkbox" name="Tags" value="Sonne" data-tags="sonne" id="checkbox1"> 
 
         <label for="checkbox1"><span>Sonne</span></label> 
 
        </li> 
 
        <li> 
 
         <input type="checkbox" name="Tags" value="Meer" data-tags="meer" id="checkbox2"> 
 
         <label for="checkbox2"><span>Meer</span></label> 
 
        </li> 
 
        <li> 
 
         <input type="checkbox" name="Tags" value="Action" data-tags="action" id="checkbox3"> 
 
         <label for="checkbox3"><span>Action</span></label> 
 
        </li> 
 
       </ul> 
 
      </fieldset> 
 
     </form> 
 
    </div> 
 
    <div class="divWrapper"> 
 
     <div class="kolonne1"> 
 
      <div class="box sonne"> 
 
       
 
        <p>sonne</p> 
 

 
      </div> 
 
      <div class="box meer"> 
 
       
 
        <p>meer</p> 
 
     
 
      </div> 
 
      <div class="box action"> 
 

 
        <p>action</p> 
 

 
      </div>

Answer 1

你只需要先通過隱藏的jQuery或CSS的所有div。

隱藏使用jQuery：$('.box').hide();

隱藏使用CSS：.box{ display:none }

請參見下面的工作代碼：

function checkSelect(el) { 
 
    if ($('#all').prop('checked') == true) { 
 
     $('#all').prop('checked', false); 
 
     $(el).show(); 
 
    } 
 
} 
 

 
function showSelect(el) { 
 
    checkSelect('.box'); 
 
    var val = $(el).data('tags');  
 
    $('div[class$="' + val + '"]').toggle('slow'); 
 
} 
 

 

 

 
$(function() { 
 
    $('.box').hide(); 
 
    // Setze Startbedingung 
 
    $('#all').prop('checked', false); 
 
    
 
    // Auswahl 
 
    $('#checkform input').change(function() { 
 
     showSelect(this); 
 
    }); 
 
    
 
    // Reset oder All 
 
    $('#resetform input').change(function() { 
 
     $('#checkform input').prop('checked', false); 
 
     if ($(this).prop('checked') == true) { 
 
      $('.box').show('slow'); 
 
     } 
 
     else { 
 
      // do nothing 
 
      $(this).prop('checked', false); 
 
     } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="checkform"> 
 
<form> 
 
    <h1>Worüber möchtest du von uns lesen?</h1> 
 
    <fieldset> 
 
    <ul> 
 
    <li><input type="checkbox" name="Tags" value="Sonne" data-tags="sonne" id="checkbox1"> <label for="checkbox1"><span>Sonne</span></label> 
 
    </li> 
 
    <li><input type="checkbox" name="Tags" value="Meer" data-tags="meer" id="checkbox2"> <label for="checkbox2"><span>Meer</span></label></li> 
 
    <li><input type="checkbox" name="Tags" value="Action" data-tags="action" id="checkbox3"> <label for="checkbox3"><span>Action</span></label> 
 
    </li> 
 
    </ul> 
 
    </fieldset> 
 
</form> 
 
</div> 
 
<div class="divWrapper"> 
 
<div class="kolonne1"> 
 
    <div class="box sonne"> 
 
    <p>sonne</p> 
 
    </div> 
 
    <div class="box meer"> 
 
    <p>meer</p> 
 
    </div> 
 
    <div class="box action"> 
 
    <p>action</p> 
 
    </div> 
 
</div> 
 
</div>

Answer 2

trigger的更改功能使用：

.trigger('change') 

請參見下面的演示：

function checkSelect(el) { 
 
    if ($('#all').prop('checked') == true) { 
 
    $('#all').prop('checked', false); 
 
    $(el).show(); 
 
    } 
 
} 
 

 
function showSelect(el) { 
 
    checkSelect('.box'); 
 

 
    var val = $(el).data('tags'); 
 
    $('div[class$="' + val + '"]').toggle('slow'); 
 
} 
 

 

 

 
$(function() { 
 
    // Setze Startbedingung 
 
    $('#all').prop('checked', false); 
 

 
    // Auswahl 
 
    $('#checkform input').change(function() { 
 
    showSelect(this); 
 
    }).trigger('change'); // ADDED 
 

 
    // Reset oder All 
 
    $('#resetform input').change(function() { 
 
    $('#checkform input').prop('checked', false); 
 
    if ($(this).prop('checked') == true) { 
 
     $('.box').show('slow'); 
 
    } else { 
 
     // do nothing 
 
     $(this).prop('checked', false); 
 
    } 
 
    }).trigger('change'); // ADDED 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="checkform"> 
 
    <form> 
 
    <h1>Worüber möchtest du von uns lesen?</h1> 
 
    <fieldset> 
 
     <ul> 
 
     <li> 
 
      <input type="checkbox" name="Tags" value="Sonne" data-tags="sonne" id="checkbox1"> 
 
      <label for="checkbox1"><span>Sonne</span></label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="Tags" value="Meer" data-tags="meer" id="checkbox2"> 
 
      <label for="checkbox2"><span>Meer</span></label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="Tags" value="Action" data-tags="action" id="checkbox3"> 
 
      <label for="checkbox3"><span>Action</span></label> 
 
     </li> 
 
     </ul> 
 
    </fieldset> 
 
    </form> 
 
</div> 
 
<div class="divWrapper"> 
 
    <div class="kolonne1"> 
 
    <div class="box sonne"> 
 

 
     <p>sonne</p> 
 

 
    </div> 
 
    <div class="box meer"> 
 

 
     <p>meer</p> 
 

 
    </div> 
 
    <div class="box action"> 
 

 
     <p>action</p> 
 

 
    </div>

Answer 3

添加CSS隱藏在頁面加載的DIV的，

.box{ 
    display:none; 
} 

這裏的演示：https://jsfiddle.net/485c2uv0/

function checkSelect(el) { 
 
      if ($('#all').prop('checked') == true) { 
 
       $('#all').prop('checked', false); 
 
       $(el).show(); 
 
      } 
 
     } 
 

 
     function showSelect(el) { 
 
      checkSelect('.box'); 
 
      
 
\t \t \t var val = $(el).data('tags');  
 
      $('div[class$="' + val + '"]').toggle('slow'); 
 
     } 
 
     
 
     
 
     
 
     $(function() { 
 
      // Setze Startbedingung 
 
      $('#all').prop('checked', false); 
 
      
 
      // Auswahl 
 
      $('#checkform input').change(function() { 
 
       showSelect(this); 
 
      }); 
 
      
 
      // Reset oder All 
 
      $('#resetform input').change(function() { 
 
       $('#checkform input').prop('checked', false); 
 
       if ($(this).prop('checked') == true) { 
 
        $('.box').show('slow'); 
 
       } 
 
       else { 
 
        // do nothing 
 
        $(this).prop('checked', false); 
 
       } 
 
      }); 
 
     });

.box{ 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="checkform"> 
 
     <form> 
 
      <h1>Worüber möchtest du von uns lesen?</h1> 
 
      <fieldset> 
 
       <ul> 
 
        <li> 
 
         <input type="checkbox" name="Tags" value="Sonne" data-tags="sonne" id="checkbox1"> 
 
         <label for="checkbox1"><span>Sonne</span></label> 
 
        </li> 
 
        <li> 
 
         <input type="checkbox" name="Tags" value="Meer" data-tags="meer" id="checkbox2"> 
 
         <label for="checkbox2"><span>Meer</span></label> 
 
        </li> 
 
        <li> 
 
         <input type="checkbox" name="Tags" value="Action" data-tags="action" id="checkbox3"> 
 
         <label for="checkbox3"><span>Action</span></label> 
 
        </li> 
 
       </ul> 
 
      </fieldset> 
 
     </form> 
 
    </div> 
 
    <div class="divWrapper"> 
 
     <div class="kolonne1"> 
 
      <div class="box sonne"> 
 
       
 
        <p>sonne</p> 
 

 
      </div> 
 
      <div class="box meer"> 
 
       
 
        <p>meer</p> 
 
     
 
      </div> 
 
      <div class="box action"> 
 

 
        <p>action</p> 
 

 
      </div>

Answer 4

這裏是另一種解決方案。代碼改進。希望這可以幫助。

jQuery(document).ready(function() { 
 
    $('.divWrapper div.box').hide(); 
 

 
    // Setze Startbedingung 
 
    $('#all').prop('checked', false); 
 

 
    // Auswahl 
 
    $('#checkform input:checkbox').change(function() { 
 
     var _this = $(this), box = $('div.box[class*="' + _this.attr("data-tags") + '"]'); 
 
     switch (true) { 
 
      case _this.is(':checked'): 
 
       box.show('slow'); 
 
       break; 
 

 
      default: 
 
       box.hide('slow'); 
 

 
     } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="checkform"> 
 
     <form> 
 
      <h1>Worüber möchtest du von uns lesen?</h1> 
 
      <fieldset> 
 
       <ul> 
 
        <li> 
 
         <input type="checkbox" name="Tags" value="Sonne" data-tags="sonne" id="checkbox1"> 
 
         <label for="checkbox1"><span>Sonne</span></label> 
 
        </li> 
 
        <li> 
 
         <input type="checkbox" name="Tags" value="Meer" data-tags="meer" id="checkbox2"> 
 
         <label for="checkbox2"><span>Meer</span></label> 
 
        </li> 
 
        <li> 
 
         <input type="checkbox" name="Tags" value="Action" data-tags="action" id="checkbox3"> 
 
         <label for="checkbox3"><span>Action</span></label> 
 
        </li> 
 
       </ul> 
 
      </fieldset> 
 
     </form> 
 
    </div> 
 
    <div class="divWrapper"> 
 
     <div class="kolonne1"> 
 
      <div class="box sonne"> 
 
       
 
        <p>sonne</p> 
 

 
      </div> 
 
      <div class="box meer"> 
 
       
 
        <p>meer</p> 
 
     
 
      </div> 
 
      <div class="box action"> 
 

 
        <p>action</p> 
 

 
      </div>

Answer 5

全部隱藏在你最初的函數中使用下面的代碼字段：

$('.box').hide(); 

Answer 6

嘗試：

$(document).ready(function(){ 
 
    $('input[type="checkbox"]').click(function(){ 
 
     var inputValue = $(this).attr("value"); 
 
     $("." + inputValue).toggle(); 
 
    }); 
 
});

.box{ 
 
     color: #fff; 
 
     padding: 20px; 
 
     display: none; 
 
     margin-top: 20px; 
 
    } 
 
    .red{ background: #ff0000; } 
 
    .green{ background: #228B22; } 
 
    .blue{ background: #0000ff; } 
 
    label{ margin-right: 15px; }

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
<meta charset="utf-8"> 
 
<title>jQuery Show Hide Elements Using Checkboxes</title> 
 
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
 
</head> 
 
<body> 
 
    <div> 
 
     <label><input type="checkbox" name="colorCheckbox" value="red"> red</label> 
 
     <label><input type="checkbox" name="colorCheckbox" value="green"> green</label> 
 
     <label><input type="checkbox" name="colorCheckbox" value="blue"> blue</label> 
 
    </div> 
 
    <div class="red box">You have selected <strong>red checkbox</strong> so i am here</div> 
 
    <div class="green box">You have selected <strong>green checkbox</strong> so i am here</div> 
 
    <div class="blue box">You have selected <strong>blue checkbox</strong> so i am here</div> 
 
</body> 
 
</html>