Question

我遇到的问题是什么时候检查了自定义复选框？当它被检查时，我想显示itemShipping div。据我所知，实际上没有检查输入，只是标签上的：after元素发生了变化。非常感谢任何帮助：）

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/awesome-bootstrap-checkbox/0.3.7/awesome-bootstrap-checkbox.css" rel="stylesheet"/>

<div class="checkbox checkbox-primary">
  <input class="styled" type="checkbox" id="itemWillShip" name="itemWillShip">
  <label for="itemWillShip">&nbsp;Will Ship</label>
</div>

<div id="itemShipping">
  <div class="col-sm-12 form-group">
    <label for="productShippingInfo" class="required">Shipping Information</label>
    <textarea class="form-control" rows="4" id="productShippingInfo" name="productShippingInfo"></textarea>
    <span id="error" class="sr-only">(error)</span>
    <span id="helpBlock" class="help-block">Add all information about your shipping details such as price, shipping method, ect.</span>
  </div>
</div>

Answer 1

// Reference the elements
var itemShipping = $('#itemShipping');
var checkbox = $('#itemWillShip');
// A function for hiding and showing the div
function toggleItemShipping(){
 itemShipping.toggle(checkbox.prop('checked'));
}
// Event handler for clicking the checkbox
checkbox.on('change', toggleItemShipping);
// When the page loads set the correct state
toggleItemShipping();

以下是完整的事情：

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/awesome-bootstrap-checkbox/0.3.7/awesome-bootstrap-checkbox.css" rel="stylesheet"/>

<div class="checkbox checkbox-primary">
  <input class="styled" type="checkbox" id="itemWillShip" name="itemWillShip">
  <label for="itemWillShip">&nbsp;Will Ship</label>
</div>

<div id="itemShipping">
  <div class="col-sm-12 form-group">
    <label for="productShippingInfo" class="required">Shipping Information</label>
    <textarea class="form-control" rows="4" id="productShippingInfo" name="productShippingInfo"></textarea>
    <span id="error" class="sr-only">(error)</span>
    <span id="helpBlock" class="help-block">Add all information about your shipping details such as price, shipping method, ect.</span>
  </div>
</div>

<script>
// Reference the elements
var itemShipping = $('#itemShipping');
var checkbox = $('#itemWillShip');
// A function for hiding and showing the div
function toggleItemShipping(){
 itemShipping.toggle(checkbox.prop('checked'));
}
// Event handler for clicking the checkbox
checkbox.on('change', toggleItemShipping);
// When the page loads set the correct state
toggleItemShipping();
</script>

＆＃13;

Answer 2

将以下内容放入CSS

#itemShipping{
  display: none;
}

使用以下jquery代码在加载文档中显示div

if($("#itemWillShip ").is(":checked") == true)
  $("#itemShipping").show();

$('#itemWillShip').click(function() {
    $("#itemShipping").toggle();
});

希望这有帮助

Answer 3

$(document).ready(function() {
    $("#itemShipping").hide();
    $('#itemWillShip').click(function () {
        if($('#itemWillShip').prop("checked") == true)
        {
            $("#itemShipping").show();
        }
        else{
            $("#itemShipping").hide();
        }
    });
});

Answer 4

为复选框注册.change()事件处理程序。然后，（取决于复选框是否为checked）.toggle(display) #itemShipping div：

$('#itemWillShip').change(function(){
  $("#itemShipping").toggle(this.checked);
}).change();

最后使用.change()方法来显示/隐藏div。它不会更改 checked属性，只需调用事件处理程序。

演示：

$('#itemWillShip').change(function () {
  $("#itemShipping").toggle(this.checked);
}).change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/awesome-bootstrap-checkbox/0.3.7/awesome-bootstrap-checkbox.css" rel="stylesheet"/>

<div class="checkbox checkbox-primary">
  <input class="styled" type="checkbox" id="itemWillShip" name="itemWillShip">
  <label for="itemWillShip">&nbsp;Will Ship</label>
</div>

<div id="itemShipping">
  <div class="col-sm-12 form-group">
    <label for="productShippingInfo" class="required">Shipping Information</label>
    <textarea class="form-control" rows="4" id="productShippingInfo" name="productShippingInfo"></textarea>
    <span id="error" class="sr-only">(error)</span>
    <span id="helpBlock" class="help-block">Add all information about your shipping details such as price, shipping method, ect.</span>
  </div>
</div>

如果选中自定义复选框，如何显示html区域？

4 个答案: