取消选中后，jQuery不会隐藏

Question

我在Firefox上使用jQuery代码时遇到了问题，它显示了检查一个在取消选中时应该再次消失的框的html详细信息。代码是：

$('#gepaeck').on('click', function() {
  showGepaeckwert($(this));
});

function showGepaeckwert(t) {
  status = $(t).prop('checked');
  if (status) {
    $('.Gepaeck').show();
  } else {
    $('.Gepaeck').hide();
  }
}

在Chrome上它运行正常。在这种情况下，有人可以给我一些暗示或帮助吗？

谢谢！

Answer 1

如果#gepaeck是复选框（输入），则：

$('#gepaeck').on('change', showGepaeckwert);

function showGepaeckwert(e) {
    $('.Gepaeck').toggle( this.checked );
}

jQuery toggle()方法文档：

  

该方法的第二个版本接受布尔参数。如果这   参数为true，则显示匹配的元素;如果是假的话   元素是隐藏的。

Answer 2

问题是.prop（'checked'）返回一个字符串，而不是布尔值。有几种方法可以解决这个问题。

与if：

中的字符串比较

if (status == 'true') {
  $('.Gepaeck').show();
}

将状态var设置为取决于字符串值的布尔值：

status = $(t).prop('checked') == 'true' ? true : false;

就个人而言，我更倾向于第二种方式。

Answer 3

click事件在change事件之前触发，因此checked尚未更新

$('#gepaeck').on('change', showGepaeckwert).trigger('change');

function showGepaeckwert() {
    $('.Gepaeck').toggle(this.checked);
}

http://jsbin.com/terupalizi/edit?html,js,output

Answer 4

这是因为您status不是Boolean而是string。

要将字符串转换为Bolean，请使用以下条件

status = (status === 'true' || status === true) || false;

参见工作示例：

function showGepaeckwert(t) {
  var status = $(t).prop('checked');
  
  status = (status === 'true' || status === true) || false;
  
  if (status) {
    $('.Gepaeck').show();
  } else {
    $('.Gepaeck').hide();
  }
}

.Gepaeck {
  padding: 20px;
  
  border: 1px solid;
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Select me
<input type="checkbox" id="example1" checked onchange="showGepaeckwert('#' + this.id)" />

<br>

<div class="Gepaeck">
  Hide me
</div>