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，则显示匹配的元素;如果为 false，则 元素是隐藏的。

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>