Bootstrap复选框和jquery

时间:2016-11-02 19:10:17

标签: javascript jquery html css twitter-bootstrap

我正在使用自举复选框,其行为似乎与普通复选框的行为不同。看看其他帖子,似乎bootstrap复选框返回undefined值,因此使用if检查不起作用。

代码:

<div class="checkbox checkbox-primary">
  <input id="homeaddress" type="checkbox" checked>
    <label for="homeaddress">
      Same As My Home Address
    </label>
</div>
<div id="show-hide-address">
  content
</div>



$("#show-hide-address").hide();
$(document).ready( function(){
    $("#homeaddress").on("click", function(){
        if ($(this).attr("checked")==undefined) { 
               $('#show-hide-address').slideUp();  // checked  
            } else {
               $('#show-hide-address').slideDown();  // unchecked
            }
    });
});

当页面加载时,复选框被选中,内容div应该是不可见的。当我取消选中它时,内容div会按原样向下滑动。但是当我再次单击该复选框时,向上滑动不起作用,没有任何反应。有没有人以前处理过这个问题。我错过了什么吗?谢谢,

更新:添加了一个小提琴 https://jsfiddle.net/gj3w046f/1/

2 个答案:

答案 0 :(得分:1)

试试这个:

$('#homeaddress').change(function() {
  if ($(this).is(':checked')) {
     $('#show-hide-address').slideUp();
  } else {
    $('#show-hide-address').slideDown();
  }
});

这里是Fiddle

答案 1 :(得分:0)

您需要更改检查属性的方式。使用此:

$(this).is(':checked')