jquery顯示/隱藏代碼與複選框

Question

這是一個倒退的問題，但這裏去... 搜索網絡和stackoverflow後，我發現了一段代碼（下），「幾乎」爲我想要的東西它要做的。它顯示頁面負載上的字段，直到它被選中，我希望它隱藏字段，直到它被檢查。我不太瞭解jQuery，甚至在閱讀了幾個教程之後，我不知道該如何改變才能使它適合我的需要！下面是代碼：

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

    <div class="form-group form-group-sm"> 
       <div class="input-group col-md-12"> 
       <label><input type="checkbox" name="shipDiff" value="1" onkeyup="getResults()"> Shipping address different than billing address?</label>     
       </div> 
      </div> 
<div class="1"> 
< div ...rest of fields here...> 

Answer 1

你的類不能與一些

$(document).ready(function(){ 
 
    $('input[type="checkbox"]').click(function(){ 
 
    var checked = $(this).is(":checked");//true > show; false > hide 
 
    var inputValue = $(this).attr("value"); 
 
    $("." + inputValue).toggle(checked); 
 
    }); 
 
});

.one{ 
 
    width: 50px; 
 
    height: 50px; 
 
    background: red; 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form-group form-group-sm"> 
 
       <div class="input-group col-md-12"> 
 
       <label><input type="checkbox" name="shipDiff" value="one" onkeyup="getResults()"> Shipping address different than billing address?</label>     
 
       </div> 
 
      </div> 
 
<div class="one"></div>

Answer 2

jQuery的開始：

function getResults(){ 
    if ($('#shipDiff').is(':checked')){ 
     $('.testClass').hide(); 
    } 
else{ 
     $('.testClass').show(); 
    } 
} 

HTML：

<div class="form-group form-group-sm"> 
      <div class="input-group col-md-12"> 
      <label><input type="checkbox" name="shipDiff" value="1" id="shipDiff" onclick="getResults()"> Shipping address different than billing address?</label>     
      </div> 
     </div> 
<div class="testClass"> 
    <strong>This Is My Contents</strong> 
</div> 

https://jsfiddle.net/emilvr/hbny0mrL/