Question

这是一个倒退的问题但是这里...... 在搜索了网络和stackoverflow之后，我发现了一段代码（下面）几乎＆＃34;适用于我想要它做的事情。它会在页面加载中显示字段，直到选中它为止，我希望它在检查之前隐藏字段。我不太了解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/

jquery显示/隐藏代码与复选框

2 个答案: